iOS Safari で 100vh を指定してもはみ出てしまう

iOS の Safari は、スクロールに応じてアドレスバーが伸縮します。一方、100vh は常にアドレスバーが縮んだ状態のビューポートの高さとなるため、アドレスバーが表示されている場合は UI が画面からはみ出してしまう問題が発生していました。

これは、新たに dvh、svh、lvh というビューポート単位が導入されたことにより解決されています。

これらの単位は、現在はすべてのモダンブラウザに実装されていますが、古いブラウザでは動作しないことに注意してください。

vh を同時に記載することで、フォールバックを指定することができます。

body {
height: 100vh; /* dvh 未対応ブラウザ向け */
height: 100dvh;
}