【CSS】要素の高さを少なくとも画面の大きさ以上にする方法【min-height】

はるかす
こんにちは、初心者プログラマーのはるかす(@mametyralove)です。

ある要素を最低でも画面の高さにして、子要素がそれ以上になるのであれば合わせるようにしたいという方には是非見て頂きたい記事となっております。

それ以外でCSS初心者の方も、是非勉強にどうぞ。

 

CSSで要素の高さを設定する際、基本「height」を使うと思います。

こちらのコードは要素の高さを画面の高さ100%としています。しかし、それ以上はなりません。

 

続いて要素の高さ最低でも100pxにするというコードを書いてみます。

このように「min-height」を使うことで、最低の高さを設定することができます。

それでは、最低でも画面の高さにするには「min-height: 100%;」にすれば良いのかと言うと、それは違います。

実際にやってみるとわかりますが、何も反映されません。

 

そこで使えるのが「vh」という単位です。「px」や「%」に変わるものです。

先にvh系統の単位を解説します。

vh ビューポートの幅に対する割合
vw ビューポートの高さに対する割合
vmin ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax  ビューポートの幅と高さのうち、値が大きい方に対する割合

ビューポートとは、画面の高さを読み取れるものと思っていただいて大丈夫だと思います。

 

そして、要素を最低でも画面の高さにするコードがこちらです。

vhは結構便利な単位なので覚えておいて良いでしょう。

 

%とvhの違い

%の場合、親要素の大きさから何%かという指定になるのに対し、vhはビューポートからの割合なので画面の大きさから計算されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です