Written by Kasumi

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

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

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

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

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

以下JSを記述

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

以下CSSを記述

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

関連記事

jQuery

【jQuery】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

更新日:2022.09.09
635
jQuery WordPress

【簡単に代替】Contact Form 7 Datepickerが使えなくなった?jQuery UIを使って日付選択を実装しよう

更新日:2022.09.09
1872
HTMLCSS

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

2022.06.30
121
HTMLCSS プログラミング

【簡単CSS】flexboxで孫要素の高さを揃えて均等に子要素を横並び配置する方法

2022.03.06
2069