Written by Kasumi

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

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

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

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

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

以下JSを記述

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

以下CSSを記述

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

目次

関連記事

HTMLCSS プログラミング

inputタグのラジオやチェックボックスをボタン画像にする方法

2021.01.04
4389
HTMLCSS

【簡単】radioボタン(ラジオボタン)のデザインをカスタマイズする方法【CSS】

更新日:2022.11.24
8012
jQuery

【簡単jQuery】radioボタンのcheckedを取得し、value値によってイベントを発火する方法。

更新日:2022.09.09
12110
jQuery

jQueryを使ってある要素をクリックしたら任意のリンク先に飛ばす方法

更新日:2022.09.09
7582