こんちは。見習いエンジニアの'めんた'です。
今回の私のgithubを片手にご覧ください。
一応MITライセンスです。
#これまでの100vh
私は画面ピッタリのシャレオツなSPAに憧れていた。
そんな時はbodyの高さを100vhで解決！
てことで、
old-master.css
body{
display: flex;
flex-direction: column;
/* これで上下ぴったりなシャレオツSPAになるはず… */
min-height: 100vh;
}
としたのですが、iOS版Safariではアドレスバーや下部のUIのサイズが計算されないようで、フッター部分がはみ出る事件が発生…
JSで解決できると思い、調べてみたがjQueryを使ったものがほとんど。
宗教上の理由でjQueryは使えないので、素のJavascriptでの解決方法を模索。
なんとか解決したので、紹介します。
#改良型100vh
まず、完成品はこちら
どうやら、Javascriptにてwindow.innerHeightを取り出したところ、正しい内側の高さを示してくれているよう…
ということは、bodyが読み込まれた後と、ブラウザのサイズが変更された（iOSの場合は、アドレスバーが表示/非表示になった）時に、window.innerHeightの値をbodyのcssに設定するだけ！
ということで、まずはmin-heightを消し…
vh-master.css
body{
display: flex;
flex-direction: column;
/* コメントアウトして削除するよ！！ */
/* min-height: 100vh; */
}
bodyの一番下に以下のscriptを埋め込み完成！
index.html
<body>
<!-- いろいろページの本体… -->
<!-- bodyの一番下に記述 -->
<script>
// body読み込み時に一度だけbodyサイズを設定
document.body.onload = ()=>{
document.body.style.minHeight = window.innerHeight + 'px';
}
// リサイズを停止して500ms後にbodyサイズを設定
let timeoutId;
window.addEventListener("resize", () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
document.body.style.minHeight = window.innerHeight + 'px';
}, 500);
});
</script>
</body>
以上でシャレオツなSPAに一歩近づきました。
それ以前にデザインセンスが絶望的なのをどうにかせねば…
あ、何か問題があればすぐにご連絡ください。