これからはこの実装がオススメ!ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。

しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。
Chromeにも対応しています。

ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック

古い方法

新しい方法

vh単位は、ルート要素の高さ(height)に相対的です。vh1に対してビューポートの高さの1%に等しく、100vhはビューポートの高さの100%となります。

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

サイトのキャプチャ

vhのサポートブラウザ

ただし、iOSではアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。それを解決するには、次の「iOSに対応する方法」です。

iOSに対応する方法

このCSSには、2つのポイントがあります。

  1. bodyに、min-height: -webkit-fill-available;を定義します。
    詳しくは、CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニックをご覧ください。
  2. htmlに、height: -webkit-fill-available;を定義します。
    デスクトップ版のChromeはFirefoxの実装に一致するように動作しているためbodyのみではスタイルが適用されません。そのため、html要素を含むように定義します。
    参考: @bfgeek

実際の動作は、下記でご覧ください。
イエローの背景が高さいっぱいに表示されていれば、期待通りの動作です。

See the Pen min-height: 100vh by Elad Shechter (@elad2412)
on CodePen.

参考: iOSにJavaScriptで対応する方法

参考として、JavaScriptを使用するテクニックです。
参考: The trick to viewport units on mobile

将来の実装方法

CSS Values and Units Module Level 4で、ビューポートの単位が拡張されます。ラージビューポート・スモールビューポート・ダイナミックビューポートが加わり、iOSでアドレスバーを含む・含まないの問題にも対応できるようになります。

元ツイートは、下記から。

sponsors

top of page

©2021 coliss