W3G

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プロパティで指定することができます。