これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック

iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り

[coliss]

100vhのiOSの挙動に対応するCSSのテクニック。CSSを簡単に利用できるPostCSSプラグインとしても配布されているだけで、CSSのみでも利用できます。

[ultimatebreak]

iOS Safariってこういうとこあるのほんと面倒。独自にモーダル実装したときの背面のスクロールロックとかもiOSだと面倒なんだよ

[tsuki-rs]

現代のIEって言うけど、IEより何百倍もマシやろ。

[poliphilus]

バグというか仕様だろう。Android Chrome も同じ。html, body に height:100% 指定してその直下要素にも height:100% すれば一応できる。入れ子になってくると大変だけど。

[mayumayu_nimolove]

webデザインはこう言う意味わかんない仕様があるから私にとってはjsより難しいと思ってたり。

[boxshiitake]

現代のIE

[Wafer]

いらんことすんなやって正直思う。OSではなくCSSでそれを回避してしまうサイトに

[nekosann_08]

この症状しかり、バウンススクロールしかり、数字の羅列を電話番号と見なすやリンクを自動で埋め込む挙動、勝手で要らない配慮が多すぎる。バウンスに至ってはアップデートで簡単に無効化出来なくなったしマジ害悪。

[spark7]

一見いい感じだけど回転とかの再描画に対応してない感あるな

[tk_musik]

vh、vwは信用しない。あれは困った人が考えることを放棄してすがるものだと思っている。俺とか。

[sotq17]

“ ”

[ngyuki]

-webkit-fill-available を使えば「画面いっぱい」なら出来る・・けど Android の Chrome でダメ？

[diveintounlimit]

何か余計なことせんといてって思った

[santec1949]

は？　お前にアドレスバー消す権利あんのか？

[trox]

“CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック サイト構築 -CSS 105 91 146 Post on:2020年9月11日 sponsors ”

[mag4n]

最近はSafariがお荷物。

[yoshi-na]

「仕様です」ってお客さんには言ってたけど、こういうハックもあるのか

[kijtra]

ピュアCSSでJavaScriptは必要ありません → 注意点：多くの場合JavaScriptを使用する必要があります

[Dragoonriders]

iOSの動作なのかwebkitの動作なのか厳密に／スクロール込みで相当昔からの挙動がベースにあるだろうから簡単に変える気ないと思うが、ある意味水モノだから明日のバージョンから変わってることもあるしなあ…。

[koogawa]

ほほーっ

[dorokei]

出くわしたことあるな

[AyeBee_TY]

html投げ捨てて全部svgで描こうぜ

[otihateten3510]

bhって何なんだ

[ryo0821]

あるあるすぎてしんどい

[cl-gaku]

IE仕草やんけ

[coppieee]

次世代IE

[ku_marin]

タイムリー

[mami-hate]

プラグインが必要