箱・余白

`min-height` 高さの下限を決める

重要度3 / 5

意味

中身が少なくても、この高さは確保したいときに使います。min-height: 50vh は、画面の高さの半分を下限にします。スマホのアドレスバーで高さが変わるときは、50svh や 50dvh の方が見た目の差が小さいことがあります。

固定の height にすると、文章が増えたときに溢れます。下限にして、増えた分は伸ばす方が安全です。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="hero">中身が少なくても、高さを確保します。</div>

CSS

.hero {
  min-height: 8rem;
  background: #efeef8;
  padding: 1rem;
}

プレビュー

長さを計算して入れる書き方です。関数の一覧から詳細を開けます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）