JS
CSS
100vhで指定した高さがスマホのアドレスバー分だけ見切れる件
タイトルのまんま
例えば、とある高さの指定をするのに
画面の高さからヘッダー（50px）分だけ引いた高さを指定したい
CSS
.test {
height: calc(100vh - 50px);
}こうすると、iphoneなどのアドレスバー分見切れてしまう。なので
.test {
height: calc(100vh - 50px);
height: calc(var(--vh, 1vh) * 100 - 50px);
}とし、元々あった記述も古いブラウザ用に念のため残しておく。
javascript
追加した行を実行するのに以下javascriptも予め読み込んでおく。
// ①関数定義
function setHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// ②初期化
setHeight();