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