W3G

min-heightプロパティの値

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

<長さ>

"em", "px" などの単位識別子を伴う数値で指定（負の値は不正）

<パーセンテージ>

包含ブロックの高さを基準とするパーセンテージ（%）による割合で指定（負の値は不正）

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

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

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

IE

◯：IE7よりサポート

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

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

サンプル

.box {
	height : 200px ;
}
body > .box {
	height : auto ;
	min-height : 200px ;
}

IE6には、内容が指定されたボックスをはみだしそうな場合にボックスの高さを勝手に拡げる奇妙な実装が施されています。この実装を逆手にとることで、min-heightプロパティに対応していないIE6にもmin-heightプロパティと同じ働きをさせることができます。サンプルコードのように子セレクタを用いて、そこにheight : auto ;をあわせて指定します。IE6は子セレクタに対応していないので、height : auto ;は適用されず、最初に指定していた高さが通ることになります。これにより他のブラウザではmin-heightプロパティの指定が通り、IE6はheightの指定が通るけれどもはみだしそうな場合に勝手にボックスの高さを拡げるので結果的に同じように機能します。