概要
CSS の height プロパティは、コンテンツエリアの高さを指定する為のプロパティです。コンテンツエリアとは、要素のパッディング、マージン、ボーダーの領域より 内側の、子要素が描画される領域を指します。
min-height と max-height プロパティは height を上書きします。
- 初期値
auto
- 適用対象次の要素を除く全要素：非置換インライン要素、テーブルの列、列グループ
- 継承しない
- 相対値の基準パーセンテージは包含ブロックの高さ基準。包含ブロックの高さが明示されず（＝コンテンツの高さ依存の場合）、この要素が絶対位置指定されていないなら、値は
auto になります。ルート要素で高さをパーセンテージ指定すると、初期包含ブロックに相対的になります。
- メディア
visual
- 計算値パーセンテージ、
auto、絶対的な長さのいずれか
- アニメーションの可否可能。長さ、パーセンテージ、calc() として可能。どちらも長さなら長さとして補間。どちらもパーセンテージならパーセンテージとして補間。それ以外では、両方の値は 長さとパーセンテージの合計（各値はゼロかもしれません）を計算する calc() 関数に変換されます。これらの calc() 関数は、それぞれ補間結果を実数として持っています。
- 正規順序形式文法で定義される一意のあいまいでない順序
構文
形式文法: auto | <length> | <percentage>
値
-
<length>
-
指定可能な単位については <length> を参照して下さい。
-
<percentage>
-
<割合> は包含ブロックの高さに対して計算されます。包含ブロックの高さが明示されていなければ、値は auto で計算されます。ルート要素（例えば <html>）ではビューポートに対するパーセンテージになります。
-
auto
-
指定要素の高さをブラウザが計算して決めます。
例
table { height: 100%; }
img { height: 200px; }
form { height: auto; }
/* make sure percentage height of body's children works as expected */
html, body { margin: 0; height: 100%; }
仕様
ブラウザ実装状況
機能 |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
基本サポート |
1.0 |
1.0 (1.7 or earlier) |
4.0 |
7.0 |
1.0 |
機能 |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
基本サポート |
1.0 |
1.0 (1) |
6.0 |
6.0 |
1.0 |
関連情報