height

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 box-sizingborder-box に設定されていた場合は、 境界領域の高さを定義します。

min-height 及び max-height プロパティは height を上書きします。

構文

/* キーワード値 */
height: auto;

/* <length> 値 */
height: 120px;
height: 10em;

/* <percentage> 値 */
height: 75%;

/* グローバル値 */
height: inherit;
height: initial;
height: unset;

<length>
絶対値で高さを定義します。
<percentage>
包含ブロックの高さのパーセントで高さを定義します。
auto
指定された要素の高さをブラウザーが計算して決めます。
max-content
本来の望ましい高さです。
min-content
本来の最小の高さです。
fit-content(<length-percentage>)
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。

形式文法

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)

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

HTML

<div id="taller">50ピクセルの高さです。</div>
<div id="shorter">25ピクセルの高さです。</div>
<div id="parent">
  <div id="child">
    親の半分の高さです。
  </div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

結果

アクセシビリティの考慮事項

テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の height を設定するよう確認してください。

仕様書

仕様書 状態 備考
CSS Box Sizing Module Level 4
height の定義
編集者草案
CSS Box Sizing Module Level 3
height の定義
草案 キーワード max-content, min-content, available, fit-content の追加。
CSS Level 2 (Revision 1)
height の定義
勧告 <length> 値のサポートを追加。どの要素に用いるかを明記。
CSS Level 1
height の定義
勧告 初回定義
初期値auto
適用対象非置換インライン要素、テーブルの列、列グループを除くすべての要素
継承なし
パーセンテージパーセンテージは包含ブロックの高さ基準。包含ブロックの高さが明示されず(=コンテンツの高さ依存の場合)、この要素が絶対位置指定されていないなら、値は auto になります。ルート要素で高さをパーセンテージ指定すると、初期包含ブロックに相対的になります。
計算値パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの種類length または percentage, calc();

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
heightChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
fit-contentChrome 完全対応 46Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 33Safari 完全対応 11
完全対応 11
完全対応 9
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 未対応 なしOpera Android 完全対応 33Safari iOS 完全対応 11
完全対応 11
完全対応 9
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
max-contentChrome 完全対応 46Edge 完全対応 79Firefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 11WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 11Samsung Internet Android 完全対応 5.0
min-contentChrome 完全対応 46Edge 完全対応 79Firefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 11WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 11Samsung Internet Android 完全対応 5.0
stretchChrome 完全対応 28
代替名
完全対応 28
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge 完全対応 79
代替名
完全対応 79
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Firefox 未対応 なしIE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari 完全対応 9
代替名
完全対応 9
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
WebView Android 完全対応 4.4
代替名
完全対応 4.4
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Chrome Android 完全対応 28
代替名
完全対応 28
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Firefox Android 未対応 なしOpera Android 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari iOS 完全対応 9
代替名
完全対応 9
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。

凡例

完全対応  
完全対応
未対応  
未対応
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報