min-height

最小の高さ

要素の高さがこれより低くならないように、下限を指定します。内容が多ければ、それ以上に伸びます。

サンプルコード

HTML

1<div class="row">

2 <div class="card">短い文</div>

3 <div class="card">内容が多いときは、指定した高さより伸びます。内容が多いときは、指定した高さより伸びます。</div>

4</div>

CSS

1.row {

2 display: flex;

3 gap: 10px;

4 align-items: flex-start;

6.card {

7 flex: 1;

8 min-height: 80px;

9 padding: 8px;

10 border: 1px solid #b68235;

11 background: #f6ead8;

12}

ブラウザでの表示

min-height は、高さの下限を決めるプロパティです。内容が少なくても指定した高さを保ち、内容が多ければ自動で伸びます。

height で高さを固定すると、文字が増えたときにはみ出してしまいます。「最低でもこのくらいの高さ」としたいときは min-height を使います。

ページの1画面目（ファーストビュー）を画面いっぱいにするときは、min-height: 100vh（または 100dvh）がよく使われます。

値	説明
`auto`	自動（初期値）
`80px`	固定の下限
`100vh`	画面の高さ
`100dvh`	スマートフォンのアドレスバーの伸縮に対応した画面の高さ

内容が多いときは画面より長くなれるよう、height ではなく min-height を使います。

CSS

1.hero {

2 min-height: 100vh;

3 min-height: 100dvh;