min-heightとmax-heightの違いと関連性

HTML・CSS

2025.02.17

CSSで要素の高さを指定する際に使われる min-height と max-height ですが、これらのプロパティはどのような違いがあり、どのように関連しているのでしょうか？この記事では、それぞれの役割と適切な使い方について解説します。

Contents

min-heightとは？

min-height は要素の最小の高さを指定するプロパティです。要素の内容が min-height で指定した値より少ない場合でも、その値以上の高さが適用されます。

.box {
  min-height: 200px;
  background-color: lightblue;
}

この場合、.box の内容が少なくても高さは200px以上になります。ただし、内容が増えて200pxを超える場合は、その分要素の高さも増加します。

max-height は要素の最大の高さを指定するプロパティです。要素の内容が max-height で指定した値を超える場合でも、それ以上の高さにはなりません。

.box {
  max-height: 300px;
  overflow: auto;
  background-color: lightcoral;
}

この場合、.box の内容が300pxを超えた場合はスクロールが発生し、それ以上の高さにはなりません（overflow: auto; を指定することでスクロールバーを表示）。

min-height と max-height を同時に指定すると、要素の高さはその範囲内で可変になります。

.box {
  min-height: 200px;
  max-height: 400px;
  background-color: lightgreen;
}

この場合、.box の高さは最低でも200px、最大でも400pxに制限されます。内容が少ない場合は200px、内容が多くても400pxを超えません。

適切に使い分けることで、レスポンシブデザインや動的なコンテンツのレイアウト調整がしやすくなります。ぜひ活用してみてください！

読んでくれてありがとう！！

money_monkey