湘南在住。国立音楽大学卒業、1996年生まれの2児の母。
ピアノ講師とWeb制作の仕事をしています。
2026年にGOODPAGE合同会社として法人化しました。
このブログでは仕事のことや子育て、暮らしについて綴っています。
ピアノ講師とWeb制作の仕事をしています。
2026年にGOODPAGE合同会社として法人化しました。
このブログでは仕事のことや子育て、暮らしについて綴っています。
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分の高さを取得することが可能になります。
以上です！
