【CSS】高さ100vh指定時のスマホステータスバーを除く方法

SP（スマートフォン）でメインヴィジュアルを画面いっぱいにしたいけどステータスバー分高さがずれてしまう。。

このような疑問に答えます！

CSSで高さをファーストビュー全面にだすにはheightに100vhを指定すれば可能です。但しスマホの場合だとステータスバー分ズレて表示されてしまいます。

本記事ではJSを使い、ステータスバー分のズレ解消方法について解説します。

以下JSを記述

まずは上記ソースをscritpt内にコピペしましょう。

以下CSSを記述

次に該当するブロックにCSSで上記を記述。
以上でステータスバー分除いて高さいっぱい表示されるはずです。