スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう

webサイトで、ブラウザの高さに合わせてファーストビューを作る場合、CSSでheightを100vhに設定すると、実際にスマホで見た場合、若干下にはみ出てしまう問題を解決します。

スマホの画面いっぱい

PCブラウザのレスポンシブモードなどでチェックしながら作っていく段階では気がつかないやつです。

vhとは

CSSのViewportを基準にした単位の1つ。
Viewport Hightの意です。
100vhでブラウザの高さ目一杯なので、1vhはブラウザの高さの1/100です。
vhがあるんだからもちろんvwもあります。
Viewport Widthで、100vwで横幅目一杯になります。

よくある、ブラウザのサイズに合わせてファーストビューをデザインする場合、要素の幅や高さを100vh、100vwにすれば、どんなサイズで閲覧しようとも、縦横目一杯に表示することができるので簡単・便利🙆‍♀️

<div>Box</div>
<div>Box</div>
<div>Box</div>
div{
  width:100%;
  height:100vh;
  background:gold;
}
div:nth-child(even){
  background:tomato;
} 

Demo

javascriptでスマホの画面の高さを取得する

スマホの100vhではブラウザのアドレスバーの高さも含まれてしまうので、アドレスバーの高さを除いたブラウザの高さを取得します。

//javascript
window.innerHeight

//jQuery
$(window).height()

どちらでも、アドレスバーを除いた領域の高さを取得することができます。
あとは、取得した値を要素の高さとして設定すればOK💡
PCでもスマホでもファーストビューに要素がピッタリ収まってスッキリ。

スマホのブラウザの高さとレスポンシブモードのブラウザの高さ
<div><span>100vh</span></div>
<div id="box"><span>innerHeight</span></div>
body{
  margin:0;
  font-family:sans-serif;
}
div{
  width:50%;
  height:100vh;
  float:left;
  box-sizing:border-box;
  border:gold 10px solid;
}
div:nth-child(even){
  border-color:tomato;
}
span{
  position:relative;
  top:50%;
  transform:translateY(-50%);
}
var vh=window.innerHeight;
document.getElementById('box').style.height=vh+'px';

//jQueryを使うなら
$('#box').css('height',$(window).height());

Demo

1vhあたりの高さを計算して、CSSのカスタムプロパティにしてみる

ファーストビューに収まるようにはできたけど、結局javascriptで毎回高さの設定が必要なのかしら、、🤔
1vhあたりの高さを計算してカスタムプロパティとしておけば、CSSでもっとvh使いやすくなるかもしれない、と思ったのでやってみます。

カスタムプロパティとは

CSSで使う変数のこと。
使い方は簡単で、:root セレクタに変数を登録しておけばOKです。
変数名は ーー から始めて、好きな値を設定します。

//カスタムプロパティの設定
:root{
  --myheight: 100px;
}

使うときは、var(変数名)でOK。

//カスタムプロパティの使用
div{
  height: var(--myheight);
}
//divのheightが100pxになる

参考: CSS カスタムプロパティ (変数) の使用:MDN

javascriptからカスタムプロパティを設定する

javascriptで取得した値をCSSのカスタムプロパティに設定するには、setProperty関数を使う。

document.documentElement.style.setProperty('変数名', '値');

ブラウザの高さ÷100の値をカスタムプロパティとして設定する。

var height=window.innerHeight;
document.documentElement.style.setProperty( '--vh', height/100 + 'px');

これで、ーーvh = ブラウザの可視領域の1%の高さ のカスタムプロパティが完成。
あとは、100vhと書くところを、100 * ーーvh で書いていけばOK💡

div{
  height: calc( var(--vh) * 100 );
}

これで、divの高さがブラウザの可視領域100%の高さに設定完了です。

Demo

ところで、clac()って何?

calc関数は、CSSで四則演算ができる関数です。
%やpxなどの単位がバラバラの値でもちゃんと計算してくれる優れもの。

div{
  height: calc(100% - 100px);
}

※演算子の両脇は半角スペースを忘れずにいれます。

こんな感じで、カスタムプロパティを設定しておけばCSS側だけでブラウザの可視領域のみの高さに依存してデザインを作っていくことができます。

CSSのflexboxを使ってボックスをタイル状に並べる

flexboxでよくあるタイル状にボックスが並んだレイアウトを作る方法と考え方まとめ💡 ベーシックなタイル状のレイアウト 同じボックスをきれいに整列させていく一番ベーシックなレイアウト。ショッピングサイトのアイテム一覧や・・・

  • 縦方向中央に配置したいとき、align-items:center;が効かないときに確認すること
  • WordPressでカスタムタクソノミー一覧ページがリダイレクトされたときのメモ
  • HTMLのpicture要素でレスポンシブに対応した画像を読み込む
  • imgのsrcsetでレスポンシブで最適な画像を設定する方法
  • 2020年のバナナ
  • 要素を中央に表示したい!CSSでtext-align:center が効かないときに確認すること
  • スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう
  • flexboxでページ全体のレイアウトを作ってみる
  • CSSのflexboxを使ってボックスをタイル状に並べる
  • CSSのflexboxを使っていろいろなナビゲーションをレイアウトしてみる
© b. All rights reserved.