height

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

heightCSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。box-sizingborder-box に設定されていた場合は、 境界領域の高さを定義します。

試してみましょう

min-height および max-height プロパティは height を上書きします。

メモ: 幾何プロパティとして、 height プロパティは、<svg><rect><image><foreignObject> の各 SVG 要素にも適用されます。 auto0 に、パーセント値は <rect> の場合は SVG ビューポートの高さに対する相対値に解決します。 CSS の height プロパティ値は、 SVG 要素に設定された height 属性値を上書きします。

構文

css
/* <length> 値 */
height: 120px;
height: 10em;
height: 100vh;
height: anchor-size(height);
height: anchor-size(--myAnchor self-block, 250px);
height: clamp(200px, anchor-size(width));

/* <percentage> 値 */
height: 75%;

/* キーワード値 */
height: max-content;
height: min-content;
height: fit-content;
height: fit-content(20em);
height: auto;
height: minmax(min-content, anchor-size(width));
height: stretch;

/* グローバル値 */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

<length>

絶対値で高さを定義します。

<percentage>

包含ブロックの高さのパーセント値で高さを定義します。

auto

指定された要素の高さをブラウザーが計算して決めます。

max-content

本来の望ましい高さです。

min-content

本来の最小の高さです。

fit-content

利用できる空間を使用しますが、 max-content を超えないようにします。すなわち、 min(max-content, max(min-content, stretch)) です。

fit-content(<length-percentage>)

利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。

stretch

要素のマージンボックスの高さを、包含ブロックの高さに設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 100% と似たような動作をしますが、結果として得られるサイズは box-sizing で決定されるボックスではなく、マージンボックスに適用されます。

メモ: ブラウザーが stretch 値のために使用する別名と実装状況については、ブラウザーの互換性の節を参照してください。

アクセシビリティ

要素の height は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。

公式定義

初期値auto
適用対象非置換インライン要素、テーブルの列、列グループを除くすべての要素
継承なし
パーセント値パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、値は auto になります。ルート要素で高さをパーセント値で指定すると、初期包含ブロックに対する相対値になります。
計算値パーセント値、 auto、絶対的な長さのいずれか
アニメーションの種類length または パーセント値, calc();

形式文法

height = 
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

ピクセル数とパーセント値を使用して高さを設定

HTML

html
<div id="taller">これは 50 ピクセルの高さです。</div>
<div id="shorter">これは 25 ピクセルの高さです。</div>
<div id="parent">
  <div id="child">これは親の半分の高さです。</div>
</div>

CSS

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%;
}

結果

仕様書

Specification
CSS Box Sizing Module Level 3
# preferred-size-properties
CSS Box Sizing Module Level 4
# sizing-values

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
height
anchor-size()
Experimental
auto
fit-content
fit-content()
Experimental
max-content
min-content
stretch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報