Written by Kasumi

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

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

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

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

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

以下JSを記述

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

以下CSSを記述

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

目次

関連記事

HTMLCSS

【HTML】OGPタグを設定してfacebookやtwitterに記事を発信しよう

更新日:2019.11.28
315
HTMLCSS プログラミング

【簡単CSS】横・縦スクロールバーを非表示にする方法【Chrome・Safari・Firefox・IE・Edge対応】

2022.03.15
1692
HTMLCSS プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
1508
HTMLCSS

CSSだけでborder線にグラデーションを入れる方法【角丸も付ける】

2022.06.17
914