W3G

heightプロパティの値

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

<長さ>

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

<パーセンテージ>

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

auto

内容（コンテンツ）に合わせて自動調整

"auto" を指定した場合、指定された要素によって解釈が異なります。ブロックボックスを形成する要素に指定した場合、要素の生成するボックスの一番上の行から下の行までが高さとなり、置換インライン要素に指定した場合、img要素であれば画像そのものサイズの高さになり、その他の applet要素, input要素, object要素, select要素, textarea要素の場合は UA が決定する内在寸法が高さとなります。

パーセンテージ値が基準値として参照する包含ブロックとは、祖先要素の中でもっとも近い祖先にあたる親要素のブロックボックスの内容領域のことを指します。たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは html要素の各辺なので、スクロール分も含めてページ全体が基準になります。この包含ブロックの中で、heightプロパティのパーセンテージ値は高さを基準値として参照します（たとえば、body要素直下にあるdivの高さを画面全体の100%にしたい場合は、html, body, body>div{ height:100%; }のように高さを指定する必要があります）。

なお、高さのサイズを固定するのではなく、柔軟に変化できる高さにしたい場合は、高さの最小値・最大値を指定する、min-heightプロパティ・max-heightプロパティを使います。また、内容領域の高さを指定する heigthプロパティに対して、内容領域の横幅は widthプロパティで指定します。さらにボックスの内容領域をはみ出した場合の表示方法については overflowプロパティでコントロールすることができます。

heightプロパティが適用できない非置換インライン要素の高さは、line-heightプロパティによる行ボックスの高さがこれに相当し、表の列・列グループ要素の高さはセル要素のボーダー領域までます。

heightプロパティの実装状況

IE

◯：IE6は指定された高さをはみだすことなく勝手にボックスの高さを拡げる振る舞いをします。また、後方互換モードではボーダー領域までを含めて高さとする誤った計測をします。

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

サンプル

html, body, #wrapper {
	margin : 0 ;
	padding : 0 ;
	width : 100% ;
	height : 100% ;
}
#wrapper {
	position : absolute ;
	top : 0 ;
	right:  0 ;
	bottom : 0 ;
	left : 0 ;
}
#box {
	width : 100px ;
	height : 100px ;
	background : red ;
	position : absolute ;
	top : 50% ;
	left : 50% ;
	margin : -50px 0 0 -50px ;
}

サンプルのように画面全体の上下中央に配置したいなどの時に、100%を指定して必ずパーセンテージ値を用いる必要があります。パーセンテージ値は包含ブロックの高さを基準とし、一番最初の包含ブロックである初期包含ブロックは html要素の各辺なので、スクロール分も含めてページ全体が基準になります。そのため、html要素, body要素も含めて100%にする必要があることに注意してください。