【height】内容領域の高さの指定

heightプロパティは、ブロックレベル要素や<IMG><TEXTAREA><INPUT><SELECT><OBJECT>といった置換要素などの内容を表示する部分の高さを指定することができます。

指定方法は実数値に単位を付ける方法、%値で指定する方法、autoを指定し高さを自動で調整する方法などありますが、heightプロパティには負の値を指定することはできません。

またWindowsのInternet Explorer(IE)5.5以前とIE6.0以降の互換モードの場合、heightプロパティで指定する高さにpaddingborderの値も含まれますので注意して下さい。

※本来であれば、paddingとborderは含まない内容領域の高さの指定となります。

書式

  • height : ……… 内容領域の高さを指定

★:数値、パーセント、auto、inherit

実数値+単位
数値にpxなどの単位を付けて内容領域の高さを指定します。
パーセント値+%
そのボックスを含む親ボックス(包含ブロック)の高さに対する割合で、内容領域の高さを指定します。包含ブロックの高さが指定されていない場合は「auto」を指定した時と同じ表示結果となります。
auto
状況に応じて自動的に高さが設定されます。置換要素(imgなど)の場合は、その要素本来の高さと同じになります。

使用した時の例

.sample1 {height: 100px;}
.sample2 {height: 30%;}

div {background:#DFF2FF;}
<div class="sample1">height: 100px</div>
<div class="sample2">height: 30%</div>

ブラウザ上の表示例

height: 100px
height: 30%

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 すべての要素(非置換インライン要素,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報