CSSで100vhを指定した際のiOSの対応

heightに100vhを指定して要素の高さを画面いっぱいにしたいという時がたまにありますが、iOSだとアドレスバーなどを含んだ画面高さになるため、UIに一部重なってしまします。
その対応策として、CSSのheightに-webkit-fill-availableを使う指定する方法を試してみます。

サンプルコード

最初にファーストビューを画面高さに合わせる想定で試してみます。
まずは対応前です。

<div class="mv">MV</div>
<div class="contents">コンテンツ</div>

.mvを画面高さに合わせる想定です。

.mv {
	height: 100vh;
	background: purple;
}

これで.mvが画面高さいっぱいに設定されましたが、iOSの場合は下部が一部UIに隠れています。
height:100vh のiOS向け対応前のデモページ

次に対応後ですが、heightに-webkit-fill-availableを設定します。
ただ、iOS端末以外で適用させたくないため、@supports (-webkit-touch-callout: none) {} でも合わせて指定しています。

.mv {
	height: 100vh;
	background: purple;
}
@supports (-webkit-touch-callout: none) {
	.mv {
		height: -webkit-fill-available;
	}
}

これでiOSでアドレスバーを含まない範囲に広げることができました。
height:100vh のiOS向け対応後のデモページ

下記キャプチャの左が対応前で右が対応後ですが、対応後は下部ツールバーの裏に.contentsで指定している緑背景がきているのが確認できます。

次にposition:fixed を指定したモーダルに対して、height:100vhを設定する場合を試してみます。

<div class="modal">
  <ul>
    <li>モーダル内リスト01</li>
    〜 略 〜
    <li>モーダル内リスト20</li>
  </ul>
</div>

position:fixedを設定した上でheight:100vhで画面高さいっぱいに広げ、overflow-y:autoでコンテンツ内容が画面高さより多い場合はスクロールするように資します。

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	background: skyblue;
}

これで対応前のサンプルができましたが、モーダル内を下にスクロールした際、コンテンツの一部が下部UIに被ってしまいます。
position:fixed + height:100vh で対応前のデモページ

先ほどと同様にheight:-webkit-fill-availableを設定します。

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	background: skyblue;
}
@supports (-webkit-touch-callout: none) {
	.modal {
		height: -webkit-fill-available;
	}
}

position:fixed + height:100vh で対応後のデモページ

下記の左が対応前で右が対応後の下部までスクロールした状態ですが、対応前は下部ツールバーで隠れてリスト18までしか見えないのに対して、対応後はコンテンツ最後のリスト20まで確認できています。

先ほどはtop:0で上部からの固定でしたが、bottom:0で下部からの固定にしてみます。

.modal {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	background: skyblue;
}

この場合、コンテンツ下部ではなくコンテンツ上部がアドレスバーに被ります。
position:fixed + height:100vh で対応前のデモページ2

この場合も同様の方法で解消できます。

.modal {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	background: skyblue;
}
@supports (-webkit-touch-callout: none) {
	.modal {
		height: -webkit-fill-available;
	}
}

position:fixed + height:100vh で対応後のデモページ2

下記の左が対応前で右が対応後のスクロール前の状態ですが、対応前は上部アドレスバーで隠れてリスト03より前が見えないのに対して、対応後は先頭のリスト01から確認できています。

今回は対応ブラウザの都合で-webkit-fill-availableを使用しましたが、iOS15.4以降のSafariの場合は「dvh」という単位を使用することでも対応することができるようです。
対応ブラウザはこちら