height

height は CSS の記述子で、ビューポートの min-heightmax-height の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。

ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。

構文

/* 1つの値 */
height: auto;
height: 320px;
height: 15em;

/* Two values */
height: 320px 200px;

auto
使用値は他の CSS 記述子の値から計算されます。
<length>
負の数ではない絶対的または相対的な長さです。
<percentage>
拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。

公式定義

関連する @規則@viewport
初期値一括指定の各プロパティとして
パーセンテージ一括指定の各プロパティとして
  • min-height: パーセンテージは、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず(この場合コンテンツの高さに依存します)この要素が絶対位置指定されていないなら、パーセンテージ値は 0 として扱われます。
  • max-height: パーセンテージは、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず(コンテンツの高さに依存します)この要素が絶対位置指定されていないなら、パーセンテージ値は none として扱われます。
計算値一括指定の各プロパティとして
  • min-height: 指定されたパーセンテージ値または絶対的な長さ
  • max-height: 指定されたパーセンテージ値または絶対的な長さ、または none

形式文法

<viewport-length>{1,2}

where
<viewport-length> = auto | <length-percentage>

where
<length-percentage> = <length> | <percentage>

高さの最小値と最大値の設定

@viewport {
  height: 500px;
}

仕様書

仕様書 状態 備考
CSS Device Adaptation
"height" descriptor の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
height descriptorChrome 未対応 29 — 84Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 未対応 4.4 — 37Chrome Android 未対応 29 — 84Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報