min-height高さの下限
要素の使用高が指定値を下回らないように制限します。現行仕様の初期値はautoです。
min-height
要素が縮められる高さの下限を決めるプロパティ。内容が少ないときは最低限の高さを保ち、内容が増えたときは必要なぶんだけ伸びます。
遊んでみよう
内容が必要とする高さと指定した下限を比較
MIN-HEIGHT
この文章が収まる高さより下限が小さいとき、箱は内容に合わせて伸びます。
CSS
.element min-height: 160px;
値のパターン
min-heightの構成要素
<length> | <percentage>長さと割合
pxなどの長さは固定の下限、%は高さが明示された包含ブロックを基準にした下限です。
height / max-height → min-heightほかの高さ指定より優先
min-heightがheightやmax-heightより大きいときは、min-heightの値が実際の高さになります。
早見表
初期値はautoです。まずはpx・%と、内容が最小高を超えたときに箱が伸びる動きを押さえます。
01
autoブラウザーが計算初期値02
240px長さで下限固定の最小高03
50%親の高さの半分以上親の高さが必要04
min-content内容の最小高を基準内容基準05
max-content内容の推奨高を基準内容基準よくある使い方
01
カードの高さを揃えやすくする
説明が短いカードにも最低限の高さを持たせつつ、文章が増えたカードは切らずに伸ばせます。
.card { min-height: 18rem; }02
画面の高さを満たすページを作る
内容が少ないページでも画面高を満たし、内容が多いページでは縦に伸びるレイアウトを作れます。
.page { min-height: 100vh; }03
入力欄やボタンの操作面を保つ
短いラベルでも一定の高さを確保し、タップやクリックしやすい操作面を作れます。
.button { min-height: 44px; }ポイント
最小高は守りながら、内容に合わせて伸びる。
heightは要素の優先する高さを指定するため、内容が増えるとoverflowの扱いが必要になることがあります。min-heightなら内容が少ないときだけ下限を保ち、内容が下限を超えれば箱も伸びます。min-heightはheightとmax-heightより優先され、負の値は使えません。置換要素ではないinline要素など一部には適用されず、通常は子要素へ継承されません。
関連するCSSも見てみよう。
min-height と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。