【js】スマホアドレスバーを除いたvhを取得する

スマホのアドレスバーが邪魔で要素と重なる、という時に使用できます。

画面サイズが変わる毎にvhを取得しcss変数に格納

js

/**
 * 画面サイズが変わるたびvh取得
 */
function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setHeight();
//ブラウザのサイズが変更された時・画面の向きを変えた時にvh再計算
window.addEventListener('resize', setHeight);

css

.fv {
  min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
  min-height: calc(var(--vh, 1vh) * 100);
}

参考：
https://web-dev.tech/front-end/javascript/setting-100vh-with-css-js/ ,
https://coliss.com/articles/build-websites/operation/css/css-cover-the-entire-height-of-the-screen.html