CSSで100vh高さ指定してもはみ出るときの解決方法

100vhだとはみ出してしまう

画面高さピッタリの指定で、100vh、100%が使えるかなと気軽挑戦したら直ぐには出来なかったので覚書として残します。

とくにiPhone上のブラウザの挙動がそうなってしまうようです。Safariで表示した時の、上段のURL表示領域か下段のブラウザ操作領域の高さが考慮されていないのが原因かなと推測。

要件

一画面のレイアウトがheader、main、footerで構成されるとして、

1. mainのコンテンツが少ない時は、mainエリアが上下一杯に伸びて、footerが下段に配置される。この結果、ちょうどぴったりな感じにしたい。
2. mainのコンテンツが増えてた場合は、親要素の高さが追従する。スクロールバーが必要になるでしょう。

内容物が少ない時に高さ100%を使用したいものです。最初から内容物が多い時は意識しないレイアウトですね。

結論

100svhを使用すればいいですね。対応していないブラウザもあるので、100vhも同時使用ですね。

Windows、Androidは100vh、Safariは100svhを使用する。

svhとは

https://caniuse.com/viewport-unit-variants

この単位は、「Large, Small, and Dynamic viewport units」。Safari、Firefoxで対応済み。

まぁそもそもSafariのUIの100vhの表示が直感的でなかったのでそのための単位なのかなと想像。

使用例

html

<div id="wrapper" class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

css

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

main {flex: 1;}

demo 100svh

demo 100vh

JavaScriptで対応する

単位svhが現れるまでは、JavaScriptでinnerHeightを取得して処理していました。

JavaScriptの例

function setHeight() {
    const e = document.getElementById('wrapper'); // 要素取得
    const v = window.innerHeight; // 高さ取得
    e.style.minHeight = v + 'px'; // min-height設定
}
setHeight();
window.addEventListener('resize', setHeight); // リサイズした場合