これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。

[coliss]

iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック。

[Falky]

『CSS Values and Units Module Level 4で、ビューポートの単位が拡張されます。ラージビューポート・スモールビューポート・ダイナミックビューポートが加わり、』無限に複雑さを増してく…。無理…

[securecat]

むかしから思ってるんだけど、ビューポートの外側に100%がいるのがそもそもおかしくない？

[w_bonbon]

fill-a(ry ちょっと癖があるので、JSで書き換えるcustomプロパティ使ってcalc(var(--vh) * 100)　みたいな感じでやってる。　アドレスバー含めるのとstickyがoverflowと相性悪いのほんとやめてほしいわ。

[maketexlsr]

この記事の上方にでっかい広告が出ている皮肉ったらないな@iPhone

[poponponpon]

人権を得たIEがSafari

[yamadar]

Safariのアドレスバー表示変更を受けてのCSS修正

[flirt774]

iOS15 だとアドレスバーが下に移動するので、この対策は不要になるかも。別の問題が出てくるので、実装されて混乱に陥りそう

[sky_2007]

“min-height: 100vh; min-height: -webkit-fill-available;”

[cl-gaku]

かなりのアホ臭さ

[chiroruxx]

iOSが悪い

[suekunhello]

めんどくさ。

[kuroaka1871]

メモ

[sodapop444]

「iOSに対応する方法」の項、bodyとhtmlの説明が逆じゃない？

[i5s4y]

Safariはお洒落なIEみたいなもん

[kijtra]

😬←これがどういう感情なのかわからない

[klim0824]

“-webkit-fill-available”

[aike]

こういうのは自分で直接書くんじゃなくて、このハックを使ってるライブラリを使うのが正解。後から見ても理由がわからないようなバッドノウハウをメンテし続けるのはつらいので。

[anklelab]

覚えておく。

[minetty99]

一行でできるように宜しく

[Shinwiki]

勝手なことしてるブラウザなんてほっとけばいいと思うんだよなぁ。早い段階から実利に媚びるからグダるんで。

[nicht-sein]

おぼえておこう

[asataken]

きっといつか役に立つと信じて

[masakuma0812]

［画面］［自動］［スマートフォン］［スクロール］［対応］［Javascript］［コード］

[forrest-gump]

便利だ！

[kuracom]

html と body に -webkit-fill-available