スマートフォンでWebサイトを閲覧する際、アドレスバーやナビゲーションバーが画面上部（safariだと下部）に表示され、せっかくのデザインやコンテンツが下の方に隠れてしまい「あ～～～」となったのでvh→dvhに変更したら解決した話。
そもそもあまり使い慣れてない「vh」。
そもそもそこまで出番のない「vh」。（失礼）
だったので理解を深めつつそれぞれの場面にあった適切な解決方法も記載していきます。
Viewport Height（vh）とは？
vhはビューポートの高さを基準とする単位です。1vhはビューポート高さの1%を表します。たとえば、ビューポートの高さが800pxの場合、1vhは8pxになります。vhはレスポンシブデザインにおいてよく使用され、コンテナの高さをビューポートに応じて動的に変更するのに役立ちます。
またvhは、ビューポートの初期ロード時の高さに基づいて計算されますが、モバイルデバイスでのアドレスバーの表示・非表示によるビューポートの高さの変化は反映されません。
Dynamic Viewport Height（dvh）とは？
dvhはCSSの標準単位ではありませんが、動的に変わるビューポートの高さに基づく単位です。1dvhは、ビューポートの動的な高さの1%を表します。dvhは、アドレスバーやナビゲーションバーを除いたブラウザウィンドウの「動的」な高さを100としたときの割合で要素の高さを指定する単位です。つまり、常に画面に表示されている領域の高さに合わせてコンテンツの高さを調整してくれるのです。
比較的新しい単位のため対応ブラウザが気になるかもしれませんが2022年時点で主要ブラウザChrome、Edge、Safari、Firefox）でサポート完了しているようです。やった～！
CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決
各単位の違い
vhはCSSで直接使用できるビューポートの高さに基づく単位であり、dvhはビューポートの高さの変化に動的に対応するためのJavaScriptを介したアプローチを指します。dvhは公式のCSS単位ではなく、特定のレイアウトの問題を解決するために開発者が独自に実装する概念です。
他にもsvh（Small Viewport Height）とlvh（Large Viewport Height）のようなdvhと同様に、アドレスバーやナビゲーションバーの影響を受けずに要素の高さを設定できるCSS単位もあります。
| 単位 | 説明 | 用途 |
|---|---|---|
| vh | ビューポートの静的な高さを基準とする単位 | デスクトップやアドレスバーが固定されたブラウザ |
| dvh | ビューポートの動的な高さを基準とする単位 | スマホブラウザなど、アドレスバーが表示・非表示になる場合に有効 |
| svh | 最小ビューポートの高さを基準とする単位 | アドレスバーが表示された状態のスマホブラウザ |
| lvh | 最大ビューポートの高さを基準とする単位 | アドレスバーが非表示になった状態のスマホブラウザ |
lvhはデスクトップ向けに、svhはスマートフォン向けに最適化されており、それぞれ異なるビューポートにおけるコンテンツの見やすさを向上させることができます。
dvhは、スマートフォンやデスクトップのUIに合わせて要素の高さを自動的に調整してくれる便利なCSS単位です。従来のvhと異なり、アドレスバーやナビゲーションバーの影響を受けずに、常に画面に表示される領域の高さを基準としています。
ということでdvhめちゃ便利～～～～～～～～～