[iOS]height:100vhの要素がSafariのツールバーに被る場合の対処法

jQuery

2019.05.152024.08.20

Javascript
CSS

Javascript

<script type="text/javascript">
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

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

let vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {

let vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);

});

</script>

CSS

selector {
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}

selector {

height: 100vh;

height: calc(var(--vh, 1vh) * 100);

}

参考サイト
https://codepen.io/team/css-tricks/pen/vapjge