【max-height】内容領域の最大の高さを設定

max-heightプロパティでは、内容領域の最大の高さを設定することができます。 最大値を指定する事で、そのボックスの高さを特定の範囲内に制限することが可能です。

またmax-heightプロパティには負の値は指定できませんので注意して下さい。

なおmax-heightを設定した事で内容がはみ出す場合の処理は、overflowプロパティを併せて使用します。

書式

  • max-height : ……… 内容領域の高さの最大値を指定

★:数値、パーセント、none、inherit

実数値+単位
数値にpxなどの単位を付けて最大の高さを設定します。
パーセント値+%
包含ブロックの高さに対する割合で最大の高さを指定します。包含ブロックの高さを指定していない場合は「none」を指定した場合と同じ結果となります。
none
最大の高さを制限しません。

使用した時の例

.sample1 {max-height: 150px;}
.sample2 {max-height: 50px; overflow: scroll;}

div {background:#DFF2FF;}
<div class="sample1">max-height:150px overflowなしの設定です。</div>
<div class="sample2">
max-height:150px overflowありの設定です。内容がはみ出すとスクロールするように設定してます。
</div>

ブラウザ上の表示例

max-height:150px overflowなしの設定です。
max-height:150px overflowありの設定です。内容がはみ出すとスクロールするように設定してます。

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素(非置換インライン要素,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer7~ , Google Chrome4~ , Firefox1~ , Opera10.1~ , Safari3.1~

関連情報