CSS - min-height

• トップ
• CSSリファレンス
• min-height

概要

説明

最小の高さを指定します。

<length>

高さを 10px 1.5em などの長さの単位で指定します。

<percentage>

高さを 10% など、要素の大きさに対するパーセントで指定します。

none

最小の高さを指定しません。

min-content

コンテンツ中の最も長い単語の長さとなります。縦書きの場合に有効です。

max-content

コンテンツ中の文章が改行されない場合の長さとなります。縦書きの場合に有効です。

fit-content

コンテンツ中の文章が改行されない場合の長さとなります。ただし親要素の高さを超えることはありません。縦書きの場合に有効です。

使用例

最小限の高さが 120px でコンテンツサイズがそれを超えると自動的に大きくなります。

<table style="height:150px;">
 <tr style="vertical-align:top">
  <td>
   <div style="min-height:120px; border:1px solid #999999; width:100px;>
    あああああああああ
   </div>
  </td>
  <td>
   <div style="min-height:120px; border:1px solid #999999; width:100px;>
    ああああああああああああああああああああああ
   </div>
  </td>
  <td>
   <div style="min-height:120px; border:1px solid #999999; width:100px;>
    あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
   </div>
  </td>
 </tr>
</table>

詳細

td に min-height を指定する方法

何故か分かりませんがテーブルの td 要素には min-height を指定しても無視される仕様だそうです。td 要素に min-height を指定したい時は下記の様に指定するとよいそうです。

td::before {
  display: block;
  float: left;
  content: "";
  min-height: 30px;
}

関連項目

リンク

• http://www.w3.org/TR/CSS2/visudet.html#min-max-height
• http://www.w3.org/TR/css3-box/#min-max
• http://www.d-toybox.com/spec/CSS3/box/index.html#the-min-width
• https://developer.mozilla.org/ja/docs/Web/CSS/min-height
• http://caniuse.com/#feat=minmaxwh