height:要素の高さを指定する

初期値 auto
適用対象 インライン要素、テーブルの列、列グループを除く全ての要素
継承 しない
アニメーション <length>値、<percentage>値、calc();
対応ブラウザ caniuseで確認

heightプロパティの説明

heightは、要素の高さを指定します。本プロパティで扱う高さは、CSSのボックス・モデルにおけるボックスの垂直方向の寸法を表します。

既定値では、box-sizingの値がcontent-boxとなっているため、heightの値はコンテンツ・ボックスの高さとなります。この場合、paddingborderの範囲は、外側へ向かって拡大します。

要素全体の高さをheightの対象としたい場合は、box-sizingの値をborder-boxに変更する必要があります。これは要素の幅を変更するwidthにも同様の意味をもたらします。

要素の最大高はmax-height、最小高はmin-heightで個別に管理できます。

heightに指定できる値

<length>
CSSで使用できる長さを表すデータ型の値です。数値と単位を組み合わせた絶対値を指定できます。
<percentage>
包含ボックスの高さを対象とした割合を示す値です。正の数値とパーセントで表します。
auto
ブラウザの自動計算に任せる値です。
max-content
要素に含まれる内容が必要とする最大の高さを要求します。
min-content
要素に含まれる内容が必要とする最小の高さを要求します。
fit-content(<length-percentage>)
利用可能な空間に対してfit-contentの式で計算を行い、指定された引数に置き換えます。結果は、min(max-content, max(min-content, <length-percentage>))と同じになります。

heightの使い方とサンプル

heightプロパティの構文は以下の通りです。

CSS
/* <length>値 */
height: 100px;
height: 10rem;

/* <percentage>値 */
height: 50%;
height: 33.3%;

/* キーワード値 */
height: auto;
height: max-content;
height: min-content;
height: fit-content(10rem);

/* グローバル値 */
height: inherit;
height: initial;
height: revert;
height: unset;

heightの実例

それでは実際にheightプロパティの書き方を見ていきましょう。以下の例は、同じ高さを指定した要素を並べて、box-sizingの値を変えた時の比較です。

heightの値はどちらも100pxですが、対象となるボックスの基準が異なるために、ブラウザに表示される要素の大きさが変わります。実は、よく見ると左側のボックスの背景領域と、右側のボックスのボーダー領域の大きさが同じです。要素の大きさこそ異なりますが、heightの指定は守られているからです。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 1rem;
}
.samp_box > div {
	padding: 10px;
	border: 10px solid #09f;
	background-color: #fff;
	background-clip: content-box;
	width: 40%;
	height: 100px;
}
.bs_cb {
	box-sizing: content-box;
}
.bs_bb {
	box-sizing: border-box;
}
HTML
<div class="samp_box">
	<div class="bs_cb">box-sizing: content-box;</div>
	<div class="bs_bb">box-sizing: border-box;</div>
</div>

親要素の割合で高さ指定を行う

次に示すのは、親要素の高さに対して相対的な高さの子要素を配置する方法です。以下の例は、明示的な高さを持つ親要素に、相対的な高さを持つ子要素を配置した時の挙動です。

パーセンテージの指定は、親要素の寸法が動的に変わるようなページで有効です。例えば、サイドバーのカラムを常に100%にしておくことで、コンテンツの量に限らずサイドバーの領域を保持しておくことができます。

表示確認

heightに関連するCSSプロパティ

要素の幅や高さ
box-sizing 要素の幅と高さをどのように計算するかを指定する
height 要素の高さを指定する
width 要素の幅を指定する
max-height 要素の高さの最大値を指定する
max-width 要素の幅の最大値を指定する
min-height 要素の高さの最小値を指定する
min-width 要素の幅の最小値を指定する
resize ユーザーが要素のサイズを変更できるかどうかを指定する