height

概要

CSS の height プロパティは、要素のコンテンツエリアの高さを指定するためのプロパティです。コンテンツエリアとは、要素のパディング、ボーダー、マージンの領域より内側の領域を指します。

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

/* キーワード値 */
height: auto;

/* <length> 値 */
height: 120px;
height: 10em;

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

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

値

<length>

指定可能な単位については <length> を参照してください。

<percentage>

包含ブロックの高さに対する <percentage> を指定します。

border-box 

<length> または <percentage> を、要素のボーダーボックスに適用します。

content-box 

<length> または <percentage> を、要素のコンテンツボックスに適用します。

auto

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

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="red">
  <span>I'm 50 pixels tall.</span>
</div>
<div id="green">
  <span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>
  </div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

仕様

ブラウザ実装状況

関連情報

• ボックスモデル, width, box-sizing, min-height, max-height