CSS height プロパティ

heightは要素の高さを指定するCSSプロパティである。高さを持つことができる要素に対して指定できる。

書式

height: height;

属性値

height
要素の高さを指定する。
width
値意味
auto自動的に調整
inherit継承

要素の高さを数値で指定する場合は、次の単位を利用できる。

height
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント
vh viewport width ビューポートの高さの1/100
vmin minimum viewport ビューポートの幅または高さで値が小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで値が大きい方の1/100
calc() 高さを計算結果で指定する。

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

関連記事

参考文献

World Wide Web Consortium (2021) CSS Box Sizing Module Level 3

World Wide Web Consortium (2021) CSS Values and Units Module Level 4