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

Post on:2021年8月19日

古い方法

/* old */
html{
  height: 100%;
}
body{
  min-height: 100%;
}

/* old */

html{

height: 100%;

}

body{

min-height: 100%;

}

新しい方法

/* new */
body{
  min-height: 100vh;
}

/* new */

body{

min-height: 100vh;

}

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

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

vhのサポートブラウザ

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

iOSに対応する方法

/* support iOS */
html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* support iOS */

html{

height: -webkit-fill-available;

}

body{

min-height: 100vh;

min-height: -webkit-fill-available;

}

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

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

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

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

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

.my-element {
  height: 100vh; /* CSS変数をサポートしていないブラウザ用のフォールバック */
  height: calc(var(--vh, 1vh) * 100);
}

.my-element {

height: 100vh; /* CSS変数をサポートしていないブラウザ用のフォールバック */

height: calc(var(--vh, 1vh) * 100);

}

const setVh = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};

window.addEventListener('load', setVh);
window.addEventListener('resize', setVh);

const setVh = () => {

const vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);

};

window.addEventListener('load', setVh);

window.addEventListener('resize', setVh);

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

将来の実装方法

body{
  min-height: 100svh;
}

body{

min-height: 100svh;

}

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

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

🤨 The #CSS ways, old VS new, to set the <body> element to cover the entire 'height' of the screen: pic.twitter.com/D0T8HF2d6w

— Elad Shechter (@eladsc) July 12, 2021