Written by Kasumi

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

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

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

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

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

以下JSを記述

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

以下CSSを記述

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

目次

関連記事

HTMLCSS

【CSS】data属性の値を擬似要素のcontentプロパティで取得する方法

2023.04.22
1651
HTMLCSS プログラミング

【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法

2022.04.08
1498
HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
2379
jQuery

【簡単】datapickerに日本の祝日を自動で登録し、選択不可にする方法【jQuery】

更新日:2022.09.09
4781