min-heightプロパティは、ボックスの最小の高さを指定します。

最小の高さを指定する事でボックス内の内容が少ない時にレイアウトが崩れず、逆に多くなった場合は高さが広がってくれます。

尚、IE6はmin-heightプロパティに対応していませんが、heightプロパティが内容量に合わせて高さが広がるバグがあるため、それを利用してmin-heightのように使う事が可能です。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<長さ>｜<パーセント>｜inherit

初期値

0

適用される要素

全ての要素
（非置換インライン要素及びテーブルの列・列グループ要素は除く）

継承

しません

パーセント値

包含ブロックの高さに対する割合

メディア

visual

値の解説

<長さ>

高さを長さの単位で指定します（300pxとか）。尚、マイナス値は不正です。

<パーセント>

包含ブロックの高さに対する割合を指定します。尚、マイナス値は不正です。

min-heightのサンプル

.sample01 {
  margin: 20px 20px 30px;
}
.sample01 .item {
  width: 250px;
  min-height: 3em;
  margin-bottom: 15px;
  background: #fef;
}

.sample02 {
  /zoom: 1;
  overflow: hidden;
  margin: 20px 20px 30px;
}
.sample02 .item {
  float: left;
  width: 200px;
  min-height: 100px;
  margin-right: 15px;
  margin-bottom: 15px;
  background: #fee;
}

<div class="sample01">
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<!-- / .sample01 --></div>

<div class="sample02">
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<!-- / .sample02 --></div>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

min-heightプロパティのサンプル

min-heightプロパティのサンプル min-heightプロパティのサンプル

min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル

min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル

min-heightプロパティのサンプル

min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル

min-heightプロパティのサンプル

min-heightプロパティのサンプル

テキストが少ないボックスも指定した最小の高さが残り、テキストが増えたりフォントサイズを大きくした際には、ボックスの高さは内容に合わせて広がります。

尚、前述したようにIE6はmin-heightプロパティに対応していないので、2つ目のサンプルをIE6対応した場合、以下のようにする事でIE6も同様に表示されます。

.sample03 {
  /zoom: 1;
  overflow: hidden;
  margin: 20px 20px 30px;
}
.sample03 .item {
  float: left;
  width: 200px;
  _height: 100px; /* for IE6 */
  min-height: 100px;
  margin-right: 15px;
  margin-bottom: 15px;
  background: #fee;
}

<div class="sample03">
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<div class="item"><p>（略）</p></div>
<!-- / .sample03 --></div>

追加している宣言は_height: 100px;の部分で、アンダースコアハックを使いIE6にだけheightプロパティが適用されます。IE6は前述したように高さが広がってしまうバグが有るため、min-heightプロパティのように使えます。
このサンプルをIE6で表示すると、同じになっているのが確認できます。

サンプルのブラウザ上の表示

min-heightプロパティのサンプル

min-heightプロパティのサンプル min-heightプロパティのサンプル min-heightプロパティのサンプル

min-heightプロパティのサンプル

min-heightプロパティのサンプル