【MEMO】height: calc(100vh - 8px)がはみ出る話

height: calc(100vh - 8px)がはみ出る話

検索窓を「bottom: 0」で表示しても出ないとき。
PCだと問題ない。が、スマホだと下にはみ出てしまう模様。
ナビゲーションバーとかの高さも「vh」に含まれるらしい。

「-webkit-fill-available」が計算で使えないようで、
なんか苦労したのでメモメモ。

CSS:

/* 親 */
.parent {
  /* 3. dvhが対応されていない場合用 (諦め) */
  height: calc(100vh - 8px);
  /* 2. varが対応されていない場合用 */
  height: calc(100dvh - 8px);
  /* 1. 変数を使う（要: JavaScript） */
  height: calc(var(--vh, 1vh) * 100 - 8px);
}

JavaScript:

// innerHeightの1%を変数に入れる
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

iOS 14.2 Safariだと1で、Android 12 Chromeだと2で解決した。