iOSのsafariで100vhを実現しようとすると、アドレスバーの有無やスクロール時にアドレスバーが細くなったり太くなったりすることを考慮する必要があり、ただ単に100vhを指定してもうまくいきません。そこで今回はアドレスバーを考慮した100vh表示になる方法をまとめました。

①-webkit-fill-availableを使う

htmlのheightと100vhにしたい要素のmin-heightに-webkit-fill-availableを指定します。

html {
  height: -webkit-fill-available;
}
.element {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

※100vhでない表示（例えば80vhなど）には設定できません。

②Javascriptを使う

JavascriptとCSS変数を使った方法です。

const setFillHeight = () => {
    const vh = window.innerHeight * 0.01;//ビューポートの高さを取得し、0.01を掛けて1%の値を算出して、vh単位の値を取得
    document.documentElement.style.setProperty('--vh',`${vh}px`);//カスタム変数--vhの値をドキュメントのルートに設定
}

window.addEventListener('resize', setFillHeight);//画面のサイズ変動があった時に高さを再計算

setFillHeight();//初期化

.element {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}

レガシーブラウザ以外に対応できる安定の方法です。

③100dvhを使う

iOS15.4以上で使えるようになった新しい方法です。

.element {
  min-height: 100vh;
  min-height: 100dvh;
}

現時点ではchromeで対応していませんが、今後主流になっていきそうです。

Can I use：Large, Small, and Dynamic viewport units

---

参考：

これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック

iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

iOS 15.4で追加されたCSS単位「dvh」が高さ100%問題を解決する

＼弊社では一緒に働いてくれる仲間を募集しております／

エントリーはこちらから▼