iOSだとheight100%と100vhが違う


どうも、レーウィンですよ。
今回はiphoneなどのiOSにおけるめんどくさい仕様について!!

heightの100vhと100%で範囲が違う件

height: 100vhにした要素の中にある画像を上下左右センタリングしようとしてtop: 50%;とmargin-top: -○px;で調整しようとしたら真ん中にこない。
あれれ~?おかしいぞ~?ってことでなんやかんやしてheight: 100%にしたら正常にセンタリングした。
ここでわかったことなんだけど、どうやらiOSにおける100vhはアドレスバーを含んでしまう。

height: 100%;
は、アドレスバーを除いた高さ。

height: 100vh;
はアドレスバーを含んだ高さ。

以上!短いけど、ではでは~。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。