min-height:要素の高さの最小値を指定する

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

min-heightプロパティの説明

min-heightは、要素の高さの最小値を指定します。heightによる高さの指定がmin-heightの値を下回る場合は、これを打ち消します。逆に要素の高さがmin-heightを上回る限り、その寸法を維持します。

要素の高さの最大値は、max-heightで指定します。

min-heightに指定できる値

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

min-heightの使い方とサンプル

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

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

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

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

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

min-heightの実例

それでは実際にmin-heightプロパティの書き方を見ていきましょう。以下の例は、height200pxの高さ指定を行ったボックスに、min-heightで制限を加えています。min-heightの値が、指定された高さを上回る場合はこれを制御し、下回る場合は指定された通りの寸法となります。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	display: grid;
 	grid: auto / repeat(3, 1fr);
	gap: 1rem;
}
.samp_box > div {
	overflow: scroll;
	height: 200px;
	padding: .3rem;
	background: #fff;
}
.mh_1 {
	min-height: 100px;
}
.mh_2 {
	min-height: 200px;
}
.mh_3 {
	min-height: 300px;
}
HTML
<div class="samp_box">
	<div class="mh_1">
		height: 200px;<br>
		min-height: 100px;<br><br>
		Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
		Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
	</div>
	<div class="mh_2">
		height: 200px;<br>
		min-height: 200px;<br><br>
		Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
		Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
	</div>
	<div class="mh_3">
		height: 200px;<br>
		min-height: 300px;<br><br>
		Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
		Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
	</div>
</div>

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

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