これで解決!height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック

iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。

CSSのみのテクニックで、JavaScriptは必要ありません。
height: 100vh;だけでなく、min-heightmax-heightでも機能します。

iOSのスマホで100vhを定義したのに、高さいっぱいに表示されない時の解決方法

PostCSS 100vh Fix -GitHub

PostCSS 100vh Fix

PostCSS 100vh Fixは、100vhのiOSの挙動(バグ?)を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。

高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通りに高さいっぱいには表示されません。

iOSでも高さいっぱいに表示するには、下記のようにします。

これはChrome、iOS/iPad/macOSのSafariで機能します。-webkit-fill-availableはChromeで問題が発生する場合があるので、適用されないようにします。
ChromeがFirefoxの実装に一致するように動作しているため、このコードはhtml要素を含むようにアップデートされました。

左:はアドレスバーを非表示、右は表示

左: アドレスバーを非表示、右: 表示

height: 100vh;だけでなく、min-heightmax-heightでも機能します。
vhのサポートブラウザは、下記の通りです。

サイトのキャプチャ

vhのサポートブラウザ

参考

iOSの100vhの挙動については、下記をご覧ください。

注意点

ピュアCSSのソリューションは制限されます。
多くの場合、postcss-viewport-height-correctionのようなJavaScriptベースのハックを使用する必要があります。

height: 90vh;height: calc(100vh - 60px);のような高さいっぱいでない場合は機能しません。

また、Android版Chromeのバグはサポートしていません。

Android版Chromeのバグ

左: アドレスバーを非表示、右: 表示

使い方

Step 1

プロジェクトにPostCSSの設定が存在するかどうかを確認します。ルートにあるpostcss.config.jspackage.jsonにあるpostcssセクション、またはバンドルの設定にあるpostcssなど。

PostCSSを使用しない場合は、公式ドキュメントに従って追加し、設定でこのプラグインを設定します。

Step 2

当プラグインをプラグインリストに追加します。

Step 3

あとはCSSで、height: 100vh;min-height: 100vh;を使用するだけです。

sponsors

top of page

©2022 coliss