CSS3スタイル虎の巻

min-height

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

解説

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

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

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

構文

構文は以下になります。

min-height: 値;

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

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

太字の値は初期値です。

サンプル

画像「image/neko.png」の最小高さを150pxにする


.sample01 {
  min-height:150px;
}

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

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

備考

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

関連項目

  • height:要素の高さを指定する
  • width:要素の幅を指定する
  • max-width:幅の最大値を指定する
  • min-width:幅の最小値を指定する
  • max-height:高さの最大値を指定する
  • min-height:高さの最小値を指定する