CSS の height プロパティは、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 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>
包含ブロックの高さのパーセントで高さを定義します。
border-box 
もしあれば、その前にある <length> または <percentage> を、要素の境界線ボックスに適用します。
content-box 
もしあれば、その前にある <length> または <percentage> を、要素のコンテンツ領域に適用します。
auto
指定された要素の高さをブラウザーが計算して決めます。
fill
書き込みモードに応じて、 fill-available インラインサイズまたは fill-available ブロックサイズを使用します。
max-content 
本来の望ましい高さです。
min-content 
本来の最小の高さです。
available 
包含ブロックの高さから、それぞれ垂直方向のマージン、境界線、パディングを引いたサイズです。
fit-content 
以下のうち大きい方の幅です。
  • コンテンツエリア固有の最小の高さ
  • コンテンツエリア固有の望ましい高さと available の高さを比較して、小さい方の幅

形式文法

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

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 Intrinsic & Extrinsic Sizing Module Level 3
width の定義
草案 キーワード max-content, min-content, available, fit-content の追加。
CSS Transitions
height の定義
草案 height がアニメーション可能と定義された。
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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
heightChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
max-contentChrome 完全対応 46Edge 未対応 なしFirefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 ありWebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
min-contentChrome 完全対応 46Edge 未対応 なしFirefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 ありWebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
stretchChrome 完全対応 28
代替名
完全対応 28
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari ? WebView Android 完全対応 4.4
代替名
完全対応 4.4
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Chrome Android 完全対応 28
代替名
完全対応 28
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
fit-contentChrome 完全対応 46Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 33Safari 完全対応 ありWebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, yyss, teoli, SphinxKnight, ethertank, sosleepy
最終更新者: mdnwebdocs-bot,