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 になります。ルート要素で高さをパーセンテージ指定すると、初期包含ブロックに相対的になります。
メディアvisual
計算値パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの種類length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121471
fill46 ? ? ? ? ?
fit-content46 ? ? ? ? ?
max-content46 ? ? ? ? ?
min-content46 ? ? ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応11 あり411 あり
fill4646 ? ? ? ?5.0
fit-content4646 ? ? ? ?5.0
max-content4646 ? ? ? ?5.0
min-content4646 ? ? ? ?5.0

関連情報

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

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