【javascript,css】スマホの下のバーを抜いた100vhの指定方法 | web関連 | 二色人日記。100vhでメインビジュアルを指定したときにスマホのステータスバー？がせっかくのメインビジュアルに被ったので何とかならないかどうか調べた時の備忘録 メインビジュアルをステータスバーを抜いた画面いっぱいに表示するためのコード <style> #main_visual{ height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */ height:calc(var(--vh, 1vh) * 100); } </style> <body> <div id="main_visual">…</div> <script> // 最初に、ビューポートの高さを取得し、0.01を掛けて1%の値を算出して、vh単位の値を取得 let vh = window.innerHeight * 0.01; // カスタム変数--vhの値をドキュメントのルートに設定 document.docu
