iPhoneやiOSデバイスでは、height: 100vhを指定してもブラウザのUI（アドレスバーやツールバーなど）の影響で正確に100%の高さが適用されないことがあります。特に、スクロール時にアドレスバーが消えたり現れたりすることで、vh単位で設定した高さが変わってしまい、レイアウトが崩れることがあります。
この問題を解決するために登場したのがdvh（Dynamic Viewport Height）です。本記事では、dvhを使ってiPhoneでの高さ100%の問題を解決する方法を紹介します。
dvhを使った解決方法
dvhは、表示可能な領域（ブラウザのUIを除いた領域）の高さに基づいてサイズを指定できる単位です。これにより、iPhoneやその他のiOSデバイスで、ブラウザのUIが動的に変化する際にも高さを正しく維持できます。
以下のコードで、dvhを使って高さ100%を実現できます。
body, html {
height: 100dvh;
margin: 0;
padding: 0;
}
互換性のためのフォールバック
dvhは比較的新しい単位であり、すべてのブラウザが対応しているわけではありません。そのため、互換性を確保するために、従来のvh単位をフォールバックとして使用することが推奨されます。
以下のように、vhを指定した後にdvhを追加することで、サポートされている場合にはdvhが適用され、サポートされていないブラウザではvhが適用されます。
body, html {
height: 100vh; /* フォールバック用 */
height: 100dvh; /* iOSなどの新しいブラウザ向け */
margin: 0;
padding: 0;
}
よくある質問（FAQ）
Q. iPhoneでheight: 100%が画面高さにならない原因は？
A. iPhoneではSafariのアドレスバーが動的に表示されるため、100vhが実際の表示領域と異なります。100svh（small viewport height）を使うと安全な最小の表示高さが得られます。
Q. iOSでheight: 100vhがスクロール可能になる場合の対処は？
A. 100svhを使います。または100dvh（dynamic viewport height）でアドレスバーの表示状態に動的に合わせた高さが使えます。サポート状況を確認して使用してください。
Q. iPhoneでのfullscreen（全画面）レイアウトを正確に実装するには？
A. CSS環境変数のenv(safe-area-inset-*)を使ってノッチやホームインジケーターの領域を考慮します。height: 100dvhとpadding: env(safe-area-inset-*)を組み合わせることをお勧めします。
まとめ
iPhoneで高さ100%が正しく機能しない問題は、dvhを使うことで簡単に解決できます。dvhを利用することで、ブラウザのUIの動的な変化にも対応したレイアウトが実現できるため、より安定した表示が可能になります。また、互換性を考慮してvhをフォールバックとして指定することで、すべてのデバイスで問題なく高さ100%を適用することができます。