概要

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

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

初期値auto
適用対象次の要素を除く全要素:非置換インライン要素、テーブルの列、列グループ
継承不可
相対値の基準パーセンテージは包含ブロックの高さ基準。包含ブロックの高さが明示されず(=コンテンツの高さ依存の場合)、この要素が絶対位置指定されていないなら、値は auto になります。ルート要素で高さをパーセンテージ指定すると、初期包含ブロックに相対的になります。
メディアvisual
計算値パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの可否可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

/* キーワード値 */
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%;
}

仕様

仕様書 策定状況 コメント
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 の定義
勧告 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

関連情報

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

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