vow.design – 大阪上新庄のウェブ&グラフィックデザイン事務所

CSSのみ:height 100vhとiPhone safariメニューバーの問題は-webkit-fill-availableで解決

CSSのみ:height 100vhとiPhone safariメニューバーの問題は-webkit-fill-availableで解決

こんにちは、このカテゴリでは初めての投稿となります、vow.design代表/デザイナーのTomo Shiotani (塩谷 朋広)です。

今まで多くのWEBデザイナーさん、コーダーさんを悩ませ続けてきた問題、画面高さいっぱいまで表示させるCSS記述 height:100vhと、iPhone safariのメニューバーとの冷戦をついに解決させにまいりました。

height:100vhを指定しても、iPhoneのメニューバーのせいで高さいっぱいの表示にならへんねん!
TOMO
TOMO
RISA
RISA
この問題は本当にだるい!
もう~こんなとこに時間割きたくないのよ!

この記事を読めば、もうこの問題に時間を割かれることはありません!

もちろん、CSSのみで解決できます!height:100%をつけたらいいなんてオチもありませんので、ご安心を笑

これで、iPhone メニューバー問題とおさらばしましょう!

CSS height:100vhでは何が起こるのか

.menu {height:100vh;}

height:100vhというCSSの記述は、ブロック要素を画面高さいっぱいまで広げることが出来るので、とても重宝します。

しかし、一方で、iPhone safariブラウザは、ロード時とスクロール後ではメニューバーの挙動が代わり、画面高さが変動してしまい、CSSはロード時しか読まれないので、メニューバー分の高さがズレてしまうということが起きます。

SAMPLE CSS height:100vhでは何が起こるのか

よくある解決方法

CSS height:100%を親子孫と設定する

body {height:100%;}
.container {height:100%;}
.menu {height:100%;}

確かに、ブロック要素の親にheight:100%を設定すれば、子要素にもheight:100%をあてることが出来ますが、それが通用しないシーン・デザインが山程あるのが現実です。

例えば、スマホではもはや標準とも思えるUIのハンバーガーメニュー。

メニューボタンをクリックして、グローバルメニューを表示させるのが通例ですが、これはheaderのなかのnavとして構築したいところ。

しかし、headerにheight:100%;を指定できないデザインなばっかりに、nav要素をheaderの外に出すような逃げ道を作らないといけないですよね。

JSで画面高さを計算し、CSS heightに代入させる

//高さ計算
$(document).ready(function () {
	hsize = $(window).height(); //window高さをセット
	$(".menu").css("height", hsize);
});

これが最も現実的によく使われている手法ではないでしょうか?

しかし、これでもメニューバー問題を解決に導くにはまだまだ力不足。
それに、できればCSS領域の問題は、JSを使わずCSSのみで解決させるのが、筋ってなもんでしょう!

iPhone safariメニューバー問題を解決する魔法のCSS

.menu {
	height:100vh;
	height: -webkit-fill-available;
}

ベンダープレフィックス「-webkit-」をつけて、fill-availableを指定することで、メニューバーを計算した形で、高さを画面いっぱいまで指定してくれます。

もちろん、スクロールした際にiPhone safariのメニューバーが消えたら、その分を再計算して自動でFIXしてくれます!

もう完璧な挙動といえるでしょう!

SAMPLE

これで、あなたの悩みはひとつ解消されたのではないでしょうか?

もし、この記事がためになったなぁと思ったら、twitterやいろんなとこで、シェアお願いします!