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;
}まとめ
iPhoneで高さ100%が正しく機能しない問題は、dvhを使うことで簡単に解決できます。dvhを利用することで、ブラウザのUIの動的な変化にも対応したレイアウトが実現できるため、より安定した表示が可能になります。また、互換性を考慮してvhをフォールバックとして指定することで、すべてのデバイスで問題なく高さ100%を適用することができます。
