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 | fit-content(<length-percentage>)

ここで
<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 または パーセント値, calc();

ブラウザーの互換性

BCD tables only load in the browser

関連情報