goodpageロゴ

スマホのツールバーを考慮した100vhの指定方法【JSとCSSで簡単解決】

スマホのツールバーを考慮した100vhの指定方法【JSとCSSで簡単解決】

投稿日:2024.09.17
最終更新日:2024.09.17
湘南在住。国立音楽大学卒業 / 96年生まれの2児母。ピアノ講師とWEB制作のお仕事をしています。
このブログではお仕事のことから日常生活のことまで、幅広く書いています。

100vhで画面いっぱいにしたはずなのに…

FVをどのデバイスで見た時にも高さがいっぱいになるようなデザインにしたいのに、ただ高さに100vhをあててもツールバーが邪魔してFV下部が見えない…!

これはなかなか大問題!そんなわけで、最近書いてるコードをご紹介。

(色々調べ上げた結果1番簡単だった方法です!)

HTML

<div class="fv"></div>

CSS

.fv {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}

JavaScript

function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setHeight();
window.addEventListener('resize', setHeight);

「vh」にブラウザ表示領域の、高さ1%にあたる数値を格納。innerHeightはツールバーの高さを含まないため、ツールバーを入れず表示領域の1vh分の高さを取得することが可能になります。

以上です!

Contact

お問い合わせ

お見積もりやご相談は無料ですので
お気軽にお問い合わせください!

お問い合わせフォーム