ブログ

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

2023.08.18 : Yamauchi Katsuki
Coding

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

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

解決方法

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

対応ブラウザ

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

おわりに

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

アーカイブ

新しいサイト制作や、既存サイトの運用に関するお困りごとなどございましたらご依頼、ご相談ください。

ビジネスやサービスに最適なウェブ制作、デザインをおこなっている株式会社ナナサンの会社案内をダウンロードいただけます。

制作依頼・ご相談 資料ダウンロード
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談