CSS3: min-height プロパティ - 高さの最小値

■ 概要

項  目説  明
記述形式 セレクタ {min-height: }
値 の形式 数値 (長さ,%) | inherit
初 期 値 0
対応ブラウザー C2+ / e7+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素 (非置換のインライン要素,テーブルのコラム,コラム・グループを除く)
継  承 しない

■ 解説

min-heightプロパティ は,高さの最小値 を指定します。

指定できる値の形式は,以下のとおりです。

説  明
数値 (長さ) 高さの最小値を長さの単位を付けて指定します。
数値 (% コンテンツのブロックの高さを基準にした百分率(%)で高さの最小値を指定します。
inherit 親要素の指定を継承します。

■ 使用例( min-height プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
div.sample {
   display: inline-block;
   margin: 10px;
   padding: 0.1em;
   border: 0.1em solid #8c8c8c;
   min-height: 2.8em;
}
HTML
<body> ~ </body>
<div class="sample">テキスト テキスト</div>
<br>
<div class="sample">
   テキスト テキスト<br>
   テキスト テキスト
</div>
<br>
<div class="sample">
   テキスト テキスト<br>
   テキスト テキスト<br>
   テキスト テキスト
</div>
<br>
<div class="sample">
   テキスト テキスト<br>
   テキスト テキスト<br>
   テキスト テキスト<br>
   テキスト テキスト<br>
   テキスト テキスト
</div>

ブラウザー 表示例
テキスト テキスト
↑ height = min-height = 2.8em の表示

テキスト テキスト
テキスト テキスト
↑ height = min-height = 2.8em の表示

テキスト テキスト
テキスト テキスト
テキスト テキスト
↑ height = 3.4em の表示

テキスト テキスト
テキスト テキスト
テキスト テキスト
テキスト テキスト
テキスト テキスト
↑ height = 4.4em の表示

上の例では,sampleクラス<div> 要素では, paddingborder の設定値から,height プロパティ の値は,通常,(行数 + 0.4) [em] となります。 しかし,このクラスでは,min-height プロパティ の値が 2.8em となっていますので,height プロパティ の値は, 2.8em を下限としてそれより小さくはなりません

■ 備考

【参考ページ】