svh, dvh, lvhとは
スマホにおける表示領域の高さの変動を考慮したCSS単位です。
ブラウザのアドレスバー表示・非表示の切り替わりによるビューポート（Webページの表示領域）のサイズ変動問題に対応するためのCSS単位です。
背景
従来の vh単位は、**ビューポートの高さに対する割合を表しますが、スマホではアドレスバーの有無によって実際の表示領域が変わっても読み込み時に決まった値が使われ続けるため、意図せず要素が画面からはみ出すなどの問題がありました。
svh, dvh, lvh は、この問題を解決するために、異なる状態のビューポートの高さを基準とします。
lvh(Large Viewport Height)
アドレスバーなどの動的なUI要素が非表示状態、つまり利用可能な最大のビューポートの高さを基準とする単位です。
従来のvhと似ていますが、最大表示領域を明示的に基準とします。vh に依存せず最大高さを必ず参照しています。したがって、アドレスバー表示時に要素の高さがビジュアル領域を超えるため、ユーザーに余分なスクロールが発生します。
svh(Small Viewport Height)
アドレスバーなどの動的なUI要素が表示された状態、つまり利用可能な最小のビューポートの高さを基準とする単位です。
スマホの画面ちょうどに要素を表示させたい場合などに便利です。
lvhとは逆でアドレスバーが表示された時のビューポートの高さが基準になる。高さが少ない時はfooterなどは一番下に表示されない恐れがあります。
dvh(Dynamic Viewport Height)
ビューポートのサイズが動的に変化するのに合わせて、単位の値も変化します。
アドレスバーなどが表示されているときは svh と同じ値に、非表示のときは lvh と同じ値に自動的に切り替わります。
100dvh` を指定すると、常に現在の表示領域の高さ全体を使用できます。
スクロールによって高さが変わる可能性があるため、メインビジュアルなどには不向きな場合もありますが、全画面表示のモーダルウィンドウやナビゲーションメニューなどには役立ちます。
svh（アドレスバーなど表示時）とlvh（アドレスバーなど非表示時）の両方の利点を併せ持つ単位です。
それぞれの使用ケース
lvh
全画面ヒーロー・背景セクション
最初から UI 非表示時の高さを使うことで、スクロール時に余白やジャンプが発生しない。
.hero {
/* UI の有無に影響されず、常に最大領域を使いたい */
height: 100lvh;
background: url('hero.jpg') no-repeat center/cover;
}
svh
固定ツールバー下の領域指定
アドレスバー、ツールバーの高さを差し引くレイアウト
固定ナビゲーションバーやヘッダーが常に表示されるレイアウトで、ツールバー分を自動的に除外した可視領域をそのまま指定したい場合に最適です。
例: PWA の固定フッター下コンテンツ、チャットウィジェットの表示領域確保など
.sidebar {
/* ツールバー分を除いた可視領域を使いたい */
height: 100svh;
}
dvh
動的に高さを追従させるキービジュアルなど
UI の表示／非表示とシームレスに連動
フルスクリーンモーダルやビデオプレーヤーなど、UI の表示／非表示に合わせて常に画面いっぱいをカバーしたい要素に最適。
.modal {
/* アドレスバー、ツールバーの開閉に合わせて常に表示領域いっぱいに */
height: 100dvh;
}
ユースケースマトリクス
| 使用シーン | 推奨単位 |
|---|---|
| 全画面ヒーロー・背景セクション | lvh |
| 固定ヘッダー/ボトムナビゲーション下 | svh |
| フルスクリーンモーダル | dvh |
| 再描画を抑えたい背景 | lvh |
| 動的高さ追従のあるインタラクティブ要素 | dvh |
ブラウザサポートとフォールバック
こちらは昔のバージョンやブラウザによっては使えないパターンがあるのでCan I use で要確認し、下記のようにフォールバックを入れることも検討しましょう。
.hero {
height: 100vh; /* 従来のvh */
height: 100lvh;
}
ちなみに、2025年5月10日現在の主要ブラウザ対応状況です。(Global Usage: 93.21%)https://caniuse.com/?search=lvh
| ブラウザ | 最小対応バージョン |
|---|---|
| Chrome (Desktop & Android) | 108 |
| Safari (macOS & iOS) | 15.4 |
| Firefox (Desktop) | 101 |
| Edge | 108 |
| Opera | 94 |
まとめ
- lvh: アドレスバー非表示時の最大高さを指定したい
- svh: アドレスバー表示時の最小高さを指定したい
- dvh: 動的に指定したい。アドレスバーの開閉に合わせてシームレスに追従させたい
これらを適切に使い分けることで、スマホ上でも安定したレイアウトを維持できます。
ぜひ実践に活かしてみてください！
Discussion