湘南在住。国立音楽大学卒業 / 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分の高さを取得することが可能になります。
以上です！
