max-heightプロパティは要素の生成するボックスの最大の高さ(これ以上は高くしない設定)を設定します。

初期値
none
適用対象
すべての要素(非置換インライン要素表関連要素を除く)
継承
しない
メディア
visual

max-heightプロパティの値

max-heightプロパティに指定できる値は、それぞれ以下の意味を示します。

none
高さに対して制限をしないように設定します
<長さ>
"em", "px" などの単位識別子を伴う数値で指定(負の値は不正)
<パーセンテージ>
包含ブロックの高さを基準とするパーセンテージ(%)による割合で指定(負の値は不正)

最大の高さに対して、最小の高さ(これ以上は低くしない設定)は、min-heightプロパティで設定します。max-heightプロパティと min-heightプロパティは同時に指定可能です。max-heightプロパティで設定した高さの値よりも、min-heightプロパティで設定した高さの値が大きい場合、min-heightプロパティの値は、max-heightプロパティと同じ値に割り当て直されます。

また、heightプロパティで指定した高さの値が、max-heightプロパティで指定した値より大きい場合や min-heightプロパティで指定した値より小さい場合、これらの指定値は、heightプロパティの値として割り当て直されます。

max-heightプロパティの実装状況

IE
◯:IE7+よりサポート
Firefox
Opera
Chrome
Safari
iOS
Android

Internet Explorer 6は max-heightプロパティに対応していません。

サンプル

li {
	width : 200px ;
	border :1px solid #aaa ;
	margin : 10px ;
	float : left ;
}
li span {
	display : block ;
	max-height : 300px ;
	min-height : 200px ;
	overflow : hidden ;
}

サンプルのように、内容領域が "200px"よりも小さい場合は、高さはmin-heightで指定されている"200px" にまで拡げられ、内容領域が"200px"よりも大きい場合は、内容領域の高さが要素の高さとなります。ただし、max-heightで上限が設けられているため内容領域が"300px"よりも大きい場合は、ボックスをはみ出すことになります。なお、はみ出した内容の表示については、overflowプロパティで指定することができます。

Updated / Published