“height”プロパティ:高さ

概要

“height”プロパティは要素の高さ、垂直方向の大きさを指定するプロパティです。

“height”プロパティは要素の好ましい高さを指定します。“min-height”プロパティや“max-height”プロパティなどによる制約がなければ“height”プロパティで指定された高さで表示されます。

“height”プロパティは既定ではコンテント・ボックスの高さを指定します。“height”プロパティで指定した高さをボーダー・ボックスの高さとしたい場合は“box-sizing: border-box;”を適用します。

サンプルコード

値

値	説明
キーワード値
auto	要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します
min-content	【横書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します
	【縦書きの場合】コンテンツをはみ出さずに内包できる最小の高さ (許容される箇所ですべて折り返した時にコンテンツを内包できる最小の高さ)
max-content	【横書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します
	【縦書きの場合】要素の理想的な高さ (コンテンツを折り返さずに内包できる最小の高さ)
stretch	マージン・ボックスの高さが使用可能な領域の高さをすべて占有するように高さを計算 (上下のマージンは折りたたまれず、“auto”の場合は“0”として扱われます。)
fit-content	“min-content”と“stretch”のうちの大きい方と“max-content”を比べた時の小さい方の値と同じ
contain	アスペクト比が指定されていればその制約の中でマージン・ボックスの高さが使用可能な領域の高さをできる限り占有するように高さを計算 (アスペクト比が指定されていなければ“stretch”と同じです。)
“<length-percentage>”値
<length>	“px”、“vh”などで高さを指定
<percentage>	内包される包括ブロックの高さを“100%”として高さを指定
他の値
fit-content()	“fit-content()”関数で高さを指定
共通キーワード

仕様書

定義されている仕様書

height

<length>
<percentage>
auto
min-content
max-content
fit-content()
stretch
fit-content
contain

デフォルトの高さ

横書きの場合

div {

height: auto;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

縦書きの場合

div {

height: auto;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

高さを内容に合わせる

横書きの場合

div {

height: min-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

div {

height: max-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

縦書きの場合

div {

height: min-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

div {

height: max-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

高さを内包される領域に合わせる

div {

margin: 10px;
height: stretch;

}

In spring, dawn is the most beautiful moment.

div {

margin: 10px;
height: fit-content;

}

In spring, dawn is the most beautiful moment.

div {

aspect-ratio: 1/1;
margin: 10px;
height: contain;

}

In spring, dawn is the most beautiful moment.

“<length>”値で指定する

div { height: 200px;}


In spring, dawn is the most beautiful moment.

“<percentage>”値で指定する

div { height: 50%;}


In spring, dawn is the most beautiful moment.

“fit-content”関数で指定する

div { height: fit-content(200px);}


In spring, dawn is the most beautiful moment.