height

heightは要素の高さを指定するCSSプロパティである。

書式

height: height;

属性値

height
要素の高さを指定する。
height
意味
*px ピクセル単位で高さを指定する。
*em 親要素のフォントサイズ比で高さを指定する。
*rem ルート要素のフォントサイズ比で高さを指定する。
*% 親要素の高さに対するパーセンテージで高さを指定する。
*vh ブラウザ画面の高さに対するパーセンテージで高さを指定する。
calc() 高さを計算結果で指定する。
auto自動的に調整
inherit継承

auto

要素の高さを自動的に調節するには、height に auto を指定する。

<div style="height: auto; border: 1px solid #dadbe0;">
  auto
</div>
auto

ピクセル単位で指定

ピクセル単位で要素の高さを指定する。

<div style="height: 100px; border: 1px solid #dadbe0;">
  100px
</div>

上記のHTMLはウェブブラウザで次のように表示される。

100px

親要素のフォントサイズに対する比率で指定

親要素のフォントサイズに対する比率で要素の高さを指定する。

<div style="font-size: xx-large;">
  <div style="height: 4em; border: 1px solid #dadbe0;">4em</div>
</div>

上記のHTMLはウェブブラウザで次のように表示される。

4em

ルート要素のフォントサイズに対する比率で指定

ルート要素(<html>)のフォントサイズに対する比率で要素の高さを指定する。この場合、親要素のフォントサイズに影響を受けない。

<div style="font-size: xx-large;">
  <div style="height: 4rem; border: 1px solid #dadbe0;">4rem</div>
</div>

上記のHTMLはウェブブラウザで次のように表示される。

4rem

親要素の高さに対する比率で指定

親要素の高さに対する比率で要素の高さを指定する。

<div style="height: 100px; border: 1px solid gray;">
  <div style="height: 50%; border: 1px solid #dadbe0;">50%</div>
</div>

上記のHTMLはウェブブラウザで次のように表示される。

50%

calc()

高さを何らかの計算結果で指定したい場合、calc() 関数を使う。

<div style="height: calc(100px + 10px); border: 1px solid #dadbe0;">
  110 pixels high
</div>
110 pixels high

画面いっぱい

要素の高さを画面いっぱいにするには、要素の高さに 100vh を指定する。

<div style="height: 100vh; border: 1px solid #dadbe0;">
  100 viewpoint high
</div>
100 viewpoint high

max-height

max-heightは要素の最大の高さを指定するCSSプロパティである。

書式

max-height: max
max
最大の高さを10pxのように数値と単位で指定するか、以下の値から選択します。
max
意味
*px ピクセル単位で高さを指定
*em 親要素のフォントサイズ比で高さを指定
*rem ルート要素のフォントサイズ比で高さを指定
*% 親要素の高さに対するパーセンテージで高さを指定
*vh ブラウザ画面の高さに対するパーセンテージで高さを指定
inherit継承
none制限なし(規定値)

min-height

min-heightは要素の最小の高さを指定するCSSプロパティである。

書式

min-height: min;

属性値

min
要素の最小の高さを指定する。
min
意味
*px ピクセル単位で高さを指定する。
*em 親要素のフォントサイズ比で高さを指定する。
*rem ルート要素のフォントサイズ比で高さを指定する。
*% 親要素の高さに対するパーセンテージで高さを指定する。
*vh ブラウザ画面の高さに対するパーセンテージで高さを指定
inherit 継承

使用例

<div style="min-height: 100px; border: 1px solid #dadbe0;">
  100 pixels high
</div>
100 pixels high

参考文献

W3C (2021) "CSS Box Sizing Module Level 3" CSS Working Group Editor Drafts