これまでの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に一歩近づきました。
それ以前にデザインセンスが絶望的なのをどうにかせねば…

あ、何か問題があればすぐにご連絡ください。

iOS版Safariで100vhがアドレスバーのせいではみ出る時の対処法

これまでの100vh

改良型100vh