ウェブランサー

max-height - 幅の最大値を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素(インライン要素を除く)
継承 しない

max-heightプロパティは、要素の高さの最大値を指定する際に使用します。IE6はmax-heightプロパティに対応していません。

max-heightに与えられる値

max-height: none;
設定しません。これが初期値です。
max-height: 数値で指定する;
[px]や[em]などの単位で指定します。
max-height: %指定;
親要素からの相対的な割合を、%値で指定します。

max-heightの使用サンプル

CSS
.text_sample01 {
 max-height: 100px;
 border: 1px solid #666666;
 background-color:#FFE4B5;
 padding: 5px;
 margin: 0px auto 10px auto;
 overflow: auto;
}
.text_sample02 {
 max-height: 100px;
 border: 1px solid #666666;
 background-color:#FFE4B5;
 padding: 5px;
 margin: 0px auto;
 overflow: auto;
}
XHTML
<div class="text_sample01">
text_sample01 [max-height: 100px;]<br />
内容物の高さが指定値以下ならそのまま<br />
</div>

<div class="text_sample02">
text_sample02 [max-height: 100px;]<br />
内容物の高さが指定値以上になると[overflow: auto;]によりスクロールバーが表示されます。<br />
テキストサンプル。テキストサンプル。<br />
テキストサンプル。テキストサンプル。<br />
テキストサンプル。テキストサンプル。<br />
テキストサンプル。テキストサンプル。<br />
テキストサンプル。テキストサンプル。<br />
</div>
表示確認
text_sample01 [max-height: 100px;]
内容物の高さが指定値以下ならそのまま
text_sample02 [max-height: 100px;]
内容物の高さが指定値以上になると[overflow: auto;]によりスクロールバーが表示されます。
テキストサンプル。テキストサンプル。
テキストサンプル。テキストサンプル。
テキストサンプル。テキストサンプル。
テキストサンプル。テキストサンプル。
テキストサンプル。テキストサンプル。

max-heightに関連するCSSプロパティ

要素の横幅や高さ
height 要素の高さを指定する
width ボックス領域の幅を指定する
max-height 要素の高さの最大値を指定する
max-width 要素の幅の最大値を指定する
min-height 要素の高さの最小値を指定する
min-width 要素の幅の最小値を指定する