web design by Tomo Shiotani on May 16, 2020

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

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

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

height:100vhを指定しても、iPhoneのメニューバーのせいで高さいっぱいの表示にならへんねん！

TOMO

RISA

この問題は本当にだるい！
もう～こんなとこに時間割きたくないのよ！

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

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

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

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

.menu {height:100vh;}

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

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

SAMPLE

よくある解決方法

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してくれます！

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