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 Basic Box Model
height の定義
草案 キーワード max-content, min-content, available, fit-content, border-box, content-box の追加。
CSS Transitions
height の定義
草案 height がアニメーション可能と定義された。
CSS Level 2 (Revision 1)
height の定義
勧告 <length> 値のサポートを追加。どの要素に用いるかを明記。
CSS Level 1
height の定義
勧告 初回定義
CSS Intrinsic & Extrinsic Sizing Module Level 3
width の定義
草案 width および height に新しいサイズ設定のキーワードを追加。

初期値auto
適用対象非置換インライン要素、テーブルの列、列グループを除くすべての要素
継承なし
パーセンテージパーセンテージは包含ブロックの高さ基準。包含ブロックの高さが明示されず(=コンテンツの高さ依存の場合)、この要素が絶対位置指定されていないなら、値は auto になります。ルート要素で高さをパーセンテージ指定すると、初期包含ブロックに相対的になります。
メディア視覚
計算値パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの種類length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 1Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
fillChrome 完全対応 46Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
fit-contentChrome 完全対応 46Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
max-contentChrome 完全対応 46Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
min-contentChrome 完全対応 46Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

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

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