【CSS】スマホの「100vh」ではみ出る問題を1行で解決！新単位「dvh」

Webサイトのトップページ（ファーストビュー）や、全画面のハンバーガーメニューを作る際、画面の高さにピッタリ合わせるために height: 100vh; を使っていませんか？

実はこれ、スマホ（特にiPhoneのSafari）で見ると大問題を引き起こします。画面下部にある「アドレスバー（メニューバー）」の高さが計算に含まれず、コンテンツの下側が画面外にはみ出して隠れてしまうのです。

かつてはこのバグを直すために、わざわざJavaScriptで画面の高さを計算してCSS変数を書き換える…という面倒な処理が必須でした。

しかし現在は、新しく登場したCSSの単位「dvh（Dynamic Viewport Height）」を使えば、たった1行でこの問題を完全に解決できます。実務で必須のモダンテクニックをサクッと解説します！

結論：これからは「100vh」ではなく「100dvh」を使う

使い方は拍子抜けするほど簡単です。今まで vh と書いていた部分を dvh に変えるだけです。

/* ❌ 昔の書き方（スマホではみ出る） */
.hero-section {
    height: 100vh;
}

/* ⭕ 現代の書き方（アドレスバーを自動計算してくれる） */
.hero-section {
    height: 100dvh;
}

たったこれだけで、スマホのアドレスバーが表示されている時はその分だけ縮み、スクロールしてアドレスバーが消えたらスッと画面いっぱいに広がる、完璧な全画面レイアウトが完成します。

3つの新しい単位（svh / lvh / dvh）の違い

実はこの新しい単位には、用途に合わせて3つの種類が用意されています。実務で使い分けられるように、それぞれの違いを理解しておきましょう。

実務での使い分けのコツ

「じゃあ全部 100dvh でいいのでは？」と思うかもしれませんが、dvh はスクロールのたびに高さがウニョウニョと変わるため、中の画像などがガクガク動いてしまうことがあります。

そのため、プロの現場では以下のように使い分けます。

1. 全画面のハンバーガーメニューやモーダル：
   スクロールしないため、可変する 100dvh が最適。
2. トップページのファーストビュー画像：
   スクロールで画像がガクガクするのを防ぐため、あえて一番狭い 100svh で固定する。

まとめ：もうJavaScriptの計算は不要！

100vhのスマホはみ出し問題は、何年もの間コーダーたちを苦しめてきたWeb制作の「あるあるトラブル」でした。

現在、dvh をはじめとするこれらの新単位は、主要なすべてのブラウザ（iOS Safari、Chrome等）で完全対応しています。サイトのパフォーマンスを落とす重いJavaScriptはさっぱり捨てて、これからはモダンな新単位でスマートにコーディングしていきましょう！