heightプロパティは要素の生成するボックスの内容領域の高さを指定します。適用対象は、非置換インライン要素表の列・列グループ要素col要素, colgroup要素)を除くすべての要素です。つまり、ブロックボックスを形成する要素インラインブロックボックスを形成する要素が対象となります。

初期値
auto
適用対象
すべての要素(表の列・列グループ要素非置換インライン要素を除く)
継承
しない
メディア
visual

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%にする必要があることに注意してください。

Updated / Published