【2025年版】CSS svh/dvh/lvhを解説！100vh問題を解決する正しい単位の選び方

2025.08.172026.09.30

【2025年版】CSS svh/dvh/lvhを徹底解説！100vh問題を解決する正しい単位の選び方

その100 vh、スマホで崩れていませんか？ビューポート問題の歴史と結論

多くの開発者を悩ませた「モバイルブラウザの100 vh問題」とは

モバイルのアドレスバー・ナビゲーションバーが表示／非表示になるたびに 100 vh が実際の画面高とズレ、ヒーローセクションがはみ出したり白帯が出現したりする――これが100 vh問題です。

結論：svh / lvh / dvh の登場で JavaScript はほぼ不要に

CSS Values & Units Lv 4で追加された svh (最小高)・lvh (最大高)・dvh (動的高) が正式仕様化され、主要ブラウザでは 93 %以上のグローバルシェアで対応済み ですCan I Use。

この記事を読めば「最適な単位」が自分で選べるようになる

後半で UI パターン別早見表 と パフォーマンス／アクセシビリティの落とし穴 まで網羅します。

svh / lvh / dvh とは？3つの新しい単位を5分で理解する

単位	意味	使われるタイミング
svh	Small Viewport Height：UIが最大表示(バーが出ている)状態での 1 %	“とにかく全部見せたい” フォーム、モーダル
lvh	Large Viewport Height：UIが最小表示(バーが隠れた)状態での 1 %	フルスクリーンの背景画像、動画
dvh	Dynamic Viewport Height：UIの出入りに合わせ動的追従	ファーストビュー、全画面セクション

【図解】vh と svh / lvh / dvh の違い

【実践】UI パターン別・最適なビューポート単位の選び方

UIパターン	推奨単位	理由
ファーストビュー（ヒーロー）	`100dvh`	スクロールでUIが出入りしても常に全画面
画面固定モーダル	`100svh`	UIが最大表示でも内容を欠けさせない
下部固定フッター	`calc(100svh - footer高さ)`	UI最大時にもフッターが重ならない
イマーシブ全画面画像	`100lvh`	UIが隠れたときに最大領域を活用

プロなら知っておきたい注意点と応用テクニック

dvh のパフォーマンスは大丈夫？

dvh は UI の出入りごとに再レイアウトが走るため レイアウト計算回数が増加 します。実測では「ヒーロー1枚 + テキスト程度」なら問題はありませんが、パララックスや多段アニメーションと併用すると repaint が増える ので注意が必要ですDEV Community。

アクセシビリティへの配慮

dvh で高さを固定した要素は 内部スクロール が発生しやすい。max-height:90dvh; overflow:auto; で回避。
OS の拡大表示設定時に想定外の折り返しが起きたら、padding を相対値にするなど調整。

vmin / vmax との組み合わせテク

ブラウザサポートとフォールバック

主要ブラウザは Chrome 108+ / Safari 15.4+ / Firefox 101+ / Edge 108+ でフルサポート。古い端末向けに次のようなプログレッシブエンハンスを推奨しますDEV Community。

100vhとは？vh・svh・lvh・dvhの違いを比較

100vhとは、ブラウザの表示領域（ビューポート）の高さ100%を表すCSSの指定です。「vh」はviewport heightの略で、1vhはビューポートの高さの1%にあたります。PCでは100vhで画面いっぱいの高さになりますが、スマホではアドレスバーの表示・非表示によって画面の高さが変わるため、100vhがはみ出す問題が起きます。

単位	基準になる高さ	スクロールで値が変わるか	主な用途
vh	多くのスマホブラウザでは、アドレスバーが隠れたときの高さ（lvhと同じ）	変わらない	PC向けのレイアウト
svh	アドレスバーが表示されているときの高さ（最小）	変わらない	必ず画面内に収めたいモーダル・フォーム
lvh	アドレスバーが隠れたときの高さ（最大）	変わらない	全画面の背景画像・動画
dvh	そのときの実際の表示領域の高さ	変わる	ファーストビューなど、常に画面ぴったりにしたい要素

なお、PCのブラウザにはアドレスバーの出し入れがないため、vh・svh・lvh・dvhはいずれも同じ値になります。違いが出るのは主にスマホやタブレットです。

dvhとvhの違い｜どちらを使うべき？

スマホで「画面ぴったり」の高さにしたいなら、vhではなくdvh（またはsvh）を使うのがおすすめです。vhは画面が最大に広がったときの高さを基準にするため、アドレスバーが表示されている状態では要素の下部が画面からはみ出します。

ただし、dvhはスクロールでアドレスバーが出入りするたびに値が変わるため、要素の高さが変わってレイアウトが動いて見えることがあります。高さが変わってほしくないファーストビューでは、あえて 100svh を選ぶのも1つの方法です。

height と min-height、どちらに100dvhを指定する？

中身の量が画面より多くなる可能性がある要素には、height ではなく min-height を使いましょう。height: 100dvh; だと高さが固定されるため、文字量が多いとはみ出します。min-height: 100dvh; なら「最低でも画面の高さ、中身が多ければ伸びる」という指定になります。

.hero {
  min-height: 100vh;  /* 未対応ブラウザ向けのフォールバック */
  min-height: 100dvh; /* 対応ブラウザではこちらが優先される */
}

このように同じプロパティを2回書くと、dvhに対応していないブラウザは2行目を無視して1行目を使います。@supports を使わなくても、フォールバックを簡単に書けます。

svh・lvh・dvhの対応ブラウザ

svh・lvh・dvhは、Chrome・Edge（バージョン108以降）、Safari（15.4以降）、Firefox（101以降）で利用できます。現在主流のブラウザではほぼ問題なく使えますが、古い端末への対応が必要な案件では、上記のフォールバックを入れておくと安心です。最新の対応状況はCan I useで確認できます。