概要
CSSプロパティ｢min-height｣は、要素の高さの最小値を設定することができます。設定することでその高さを下回ることがなくなります。最低限の高さは保持したい場合に有用です。一方で、最大値を指定したい場合は max-height を使用し、更に横方向の最大、最小値は、min-width, max-width プロパティを使用します。
また height を同時に指定した場合は、height の値が ｢min-height｣ の値を下回ることはありません。
<p class="height">高さ120pxのボックス</p>
<p class="min-height">要素の高さが最小値未満</p>
<p class="min-height">要素の高さが最小値をこえた場合。ボックスの高さは要素のぶんだけ大きくなります</p>
<style>
* {
margin: 0;
padding: 0;
}
p {
background-color: #ffe4e1;
display: inline-block;
width: 100px;
float: left;
margin: 10px;
}
.height {
height: 120px;
}
.min-height {
min-height: 120px;
}
</style>値の指定方法
{ min-height: キーワード, 値, パーセント }実数値 + 以下のような単位で指定します。マイナス値は指定できませんので、注意しましょう。
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
使用例
画像下のテキストが入る部分に値を指定しています。最低限の高さのみを指定しておき、中に入るテキストの量によって背景の高さを可変にしている例です。
<div>
<p class="min-height">このグリーンカレーは絶品です。</p>
</div>
<div>
<p class="min-height">このグリーンカレーは絶品です。何回食べても飽きずに食べられます。</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 200px;
border: 1px solid #000;
position: relative;
background: url('https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg') no-repeat 0 0;
background-size: cover;
text-align: center;
margin-bottom: 10px;
}
p {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
padding: 0 10px;
font-size: 12px;
color: #fff;
text-align: left;
word-wrap: break-word;
box-sizing: border-box;
width: 300px;
}
.min-height {
min-height: 20px;
}
</style>