height

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 box-sizing が border-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