CSSで画面高さいっぱいを指定する時の単位

けのーびけのーび

バックドロップ、オーバーレイなどで画面の高さいっぱいにCSS指定するケースがあると思います。そして、特にiOS Safariといったブラウザではブラウザ画面の上下にアドレスバー・アクションバーが現れるため、高さ指定の際に考慮しなければなりません。

要素を画面の高さいっぱいにするビューポート単位であるvh (Viewport Height)を指定すると便利です。

横幅のビューポート単位vwもありますが、今回の記事の範囲から外れるため、ここでは取り上げません。

ビューポート単位 (高さ)

サポートしているブラウザは限定されます(※1, 2022年7月の段階)が、Large、Small、Dynamicのプレフィックス付きの単位があります。

  • dvh (Dynamic Viewport Height)
  • svh (Small Viewport Height)
  • lvh (Large Viewport Height)

※1: Can I use(https://caniuse.com/?search=vh)を参照

Large Viewport (大きいビューポート)とSmall Viewport (小さいビューポート)の違いについては、The Large, Small, and Dynamic Viewports(https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/)の記事がわかりやすいです。

画面高さいっぱいの指定はこうしよう

iOS Safari(v15.4以降)をカバーする場合は次のように指定しておくのが良いです。

/* ※セレクタは仮です */
.target-element {
  /* dvhが機能しないブラウザ向けにフォールバック(100vh)を併せて指定すること */
  height: 100vh;
  height: 100dvh;
}

dvhやsvh、lvhがiOS Safari以外のブラウザに実装されるまでは、しばらくは上記のようにフォールバックを併せて指定しておきましょう。

おまけ

以下、おまけです。

ビューポート単位を使わない方法

いくつかやり方はあると思いますが、代表的なものを挙げておきます。

  • ビューポート単位を用いない場合は、bodyとhtmlにheight:100%を指定する
  • (モーダルとかの用途に限られそうだが) 要素にpositionプロパティをfixedやabsoluteを指定して、insetプロパティとかで広げる

-webkit-fill-available は使わない方が吉

-webkit-fill-availableをheightプロパティに指定する方法が紹介されたりしていますが、課題があるようなので使わない方が吉かと思います。