「Safariでheight:100vhが合わない」を解決！

Safariは100vhだとはみ出してしまう

画面の高さぴったりにしたいとき、100vhを使ってもSafariでは画面の高さをはみ出してしまいます。
原因は、Safariで表示したときに出るURL表示領域やブラウザ操作領域の高さが考慮されていないためです。

解決方法

この問題をあっさりと解決してくるビューポート単位があります。
それはずばり、「svh」です。
この単位は、SafariのURL表示領域やブラウザ操作領域の高さを除いた画面の高さで表示してくれます。

対応ブラウザ

2023年8月現在の、ブラウザのサポート状況は下記の通りです。

おわりに

「svh」以外にも、便利なビューポート単位は「vmin」や「vmax」などいろいろとあるので、ぜひチェックしてみてください！