仕様

height<length-percentage> | auto | min-content | max-content | fit-content(<length-percentage>)
一括/個別個別指定プロパティ
初期値auto
適用対象置換されていないインラインを除くすべての要素
継承なし
百分率包含ブロックの高さを基準
計算値指定されたとおり、<length-percentage>値が計算されます
補足<length-percentage> = <length> | <percentage>

height プロパティは、要素の高さを設定する個別指定プロパティです。
非継承プロパティで、初期値は auto なので、省略時は auto が指定値となります。

box-sizing プロパティにより、コンテンツ領域の高さか境界領域の高さかを指定できます。

<length> 値

  1. cdvSample010 > div { outline: solid 1px currentColor; }
  1. <div class="cdvSample010">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

例
  1. height: 2em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. height: 4.8rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素のfont-size の計算値を用います。
ルート要素には、font-size: 62.5%; を指定しています。

例
  1. height: 48px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。
(ブラウザなどの環境で文字サイズ 16px を想定しての表示例です。)

例
  1. height: 5vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例
  1. height: 10vh;
  2. font-size: 2em;

単位 vh の値を指定しました。vh は、ビューポートの初期値の包含ブロックにおける高さの1%と同じです。

例

<percentage> 値

  1. cdvSample130 > div { outline: dashed 1px currentColor; box-sizing: border-box; height: 7em; padding: 1.0em; }
  2. cdvSample130 > div > div { outline: solid 1px currentColor; box-sizing: border-box; }
  1. <div class="cdvSample130">
  2. <div><div style="">例</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
パティングは、コンテンツ領域と境界領域に差を付ける為に記述しています。box-sizing は、割合の対象を判り易くする為に記述しています。

例
  1. height: 80%;

単位 % の値を指定しました。% は、包括要素のコンテンツ領域の高さ (height) に対しての割合です。

例

キーワード

  1. cdvSample010 > div { outline: solid 1px currentColor; }
  1. <div class="cdvSample010">
  2. <div style="">Japanese only...</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

Japanese only...
  1. height: auto;

キーワード auto を指定しました。auto は、ブラウザが適切な値を選択します。

Japanese only...
  1. height: min-content;

キーワード min-content を指定しました。min-content は、最小の固有の高さな値を選択します。

Japanese only...
  1. height: max-content;

キーワード max-content を指定しました。max-content は、望ましい固有の高さな値を選択します。

Japanese only...

CSS全体のキーワード

  1. cdvSample150 > div { outline: dashed 1px currentColor; box-sizing: border-box; height: 5em; padding: 1.0em; }
  2. cdvSample150 > div > div { outline: solid 1px currentColor; box-sizing: border-box; }
  1. <div class="cdvSample150">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
パティングは、コンテンツ領域と境界領域に差を付ける為に記述しています。box-sizing は、割合の対象を判り易くする為に記述しています。

親
子
  1. height: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. height: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。height プロパティの初期値は auto です。

親
子
  1. height: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。height プロパティは非継承プロパティなので初期値の auto を設定します。

親
子