Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

height

要素の高さを指定できます。

サンプルコード
p.test { height: 500px;}
p.test1 { height: auto;}
指定可能な値一覧
概要
auto内容物によって高さを自動算出します。img要素に指定した場合は画像サイズそのままの大きさで反映するか、もしくはアスペクト比が維持できる高さを横幅に合わせて自動算出します。『height』プロパティの初期値はこの『auto』となります。
数値数値で指定します。主に使用される単位は『px』や『%』です。負の値の指定はできません。『%』で指定した場合の基準となる大きさは包含ブロックの高さとなります。
ブラウザでの表示結果
<div style="height: 100px; background-color: #ff0;">ここはdiv要素です。『height: 100px』と指定しています。</div>

<div style="height: auto; background-color: #ff0;">ここはdiv要素です。『height: auto』と指定しています。内容物の大きさで高さが自動算出されます。</div>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

要素の高さを指定できます。

置換要素以外のインラインレベル要素に『height』プロパティを指定しても反映されません。置換要素とはimg要素、input要素、object要素、select要素、textarea要素、button要素等以外の『display』プロパティの値が『inline』となっている要素です。

<span style="height: 100px; background-color: #ff0;">ここはspan要素です。『height: 100px』と指定していますが非置換要素のインラインレベル要素のため『height』プロパティは反映されません。</span>

<p>以下は『height: 300px』と指定したimg要素です。img要素は置換要素なので『height』プロパティが反映されます。</p>
<p><img style="height: 300px;" src="/dictionary-css/img/sample.jpg"></p>

値の単位を『%』で指定した場合は包含ブロックの大きさを基準とした相対値となります。その際は自身のボーダーとパディングの値を含まない状態で反映します。

<div style="height: 300px; border: solid 1px #f00;">
	<div style="height: 100%; background-color: #ff0;">ここはdiv要素の中のdiv要素です。親のdiv要素(赤枠の要素)に『height: 300px』と指定し、この要素(背景色黄色の要素)には『height: 100%』と指定しています。この要素の高さは親要素の大きさを基準とした相対値となるため、『300px』となります。</div>
</div>

<p>以下は『height: 300px』と指定したdiv要素の中にいる『height: 100%』と指定したimg要素です。親要素のdiv要素(赤枠の要素)の大きさを基準とした相対値となるため、img要素の高さは『300px』となります。</p>
<div style="height: 300px; border: solid 1px #f00;">
	<img style="height: 100%;" src="/dictionary-css/img/sample.jpg">
</div>

<div style="height: 300px; border: solid 1px #f00;">
	<div style="height: 100%; padding: 50px 0; background-color: #ff0; opacity: 0.7;">ここはdiv要素の中のdiv要素です。親のdiv要素(赤枠の要素)に『height: 300px』と指定し、この要素(背景色黄色の要素)には『height: 100%』、『padding: 50px 0』と指定しています。この要素の高さは親要素の大きさを基準とした相対値となりますが、自身のパディングの大きさが加算されるため、『400px』となり親要素を突き破ります。</div>
</div>

インライン要素、及びimg要素以外の『height』プロパティの値を『auto』とした場合は内容物の大きさで高さが自動算出されます。

<div style="height: auto; background-color: #ff0;">ここはdiv要素です。『height: auto』と指定しています。この要素の高さは内容物の大きさに合わせて自動算出されます。</div>

img要素の『height』プロパティを『auto』とした場合はその画像の大きさで反映されます。尚、『width』プロパティの値に『auto』以外の値が指定されていた場合はアスペクト比が維持できる高さを横幅に合わせて自動算出します

<p>以下は高さ320px、高さ214pxの画像を読み込み、『height: auto』と指定したimg要素です。img要素の『height』プロパティに『auto』と指定していると画像サイズそのままで反映されます。以下のimg要素の高さは『214px』となります。</p>
<p><img style="height: auto;" src="/dictionary-css/img/sample.jpg"></p>

<p>以下は高さ320px、高さ214pxの画像を読み込み、『height: auto』、『width: 200px』と指定したimg要素です。img要素の『height』プロパティに『auto』と指定し、『width』プロパティを『auto』以外の値に指定するとアスペクト比が維持できる高さを横幅に合わせて自動算出します。よって以下のimg要素の高さは『134px』となります。</p>
<p><img style="height: auto; width: 200px;" src="/dictionary-css/img/sample.jpg"></p>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。