【CSS】iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる方法

ARANK

TAK(@tak_dcxi)です。今回もCSSに関する投稿です。以前このようなツイートをしました。メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。iOSのSafariでの100vhが気に食わない問題iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。そんな中、先程のツイートからちょうど数日後、新しく発見されたテクニックが実装者を沸かせました。bodyの高さに100vhを指定して、かつ画面いっぱいに表示したい要素の高さに-webkit-fill-availableを指定する。これだけで「iOSのSafariでの100vhが気に食わない問題」が解決できるようになったのです！めでたしめでたし。おわり。…-webkit-fill-available、不安定問題まず、これiOSで…