CSS┃1stビューに画像がぴったり収まる方法
【CSS】要素の高さを100vhとしたときの問題点とは？3つの解決方法について解説
vh(view height)は、要素のサイズを指定する単位の1つで、100vhは、スマホの画面の高さを示します。
以下のように指定します。
div {
height: 100vh;
}
これに対して、100%とは親要素の高さいっぱいという指定になります。
親要素のサイズが100%であれば、これも画面の高さと等しくなるのですが、そうでない場合も多いので注意が必要です。
このほか、要素のサイズはpxやemでも指定できますが、いずれもサイズを固定してしまいます。
レスポンシブサイトのファーストビューで、画面いっぱいのコンテンツを見せたいときなどには、あまり向いていない指定と言えるでしょう。
スマホの画面サイズを基準にしたvhは、そんな場面で役立つ単位です。
今回はデザイン的な観点から採用を見送るも、テストでは実装できたので採用とします。
