min-height

min-heightは、高さの最小値を指定するスタイルです。

解説

要素の高さの最小値を指定します。
ある一定の高さサイズ以下にはしたくない場合に使用します。

例えば、画像を表示させる時に高さを100px以上に揃えたい場合などに使用します。

heightと併用する場合は、heightの値は割合指定（可変サイズ）としてください。

構文は以下になります。

min-height: 値;

min-heightには以下の値が指定できます。

値	説明
auto	要素の内容により自動で指定される（例）min-height:auto;
数値	px単位などで指定する（例）min-height:300px;
割合	割合で指定する（例）min-height:70%;

太字の値は初期値です。


.sample01 {
  min-height:150px;
}


<img src="image/neko.png" class="sample01">

画像のheightサイズは100pxですが、150pxサイズで表示されています。

heightとmin-heightのサイズが競合する場合は、min-heightのサイズが優先されます。
（heightサイズよりも min-heightサイズの方が大きい場合など）