概要
CSSプロパティ｢max-height｣は、要素の高さの最大値を設定することができます。設定することでその高さを超えることがなくなります。高さを固定したくないが、最大高さは保持したい場合に有用です。一方で、最小値を指定したい場合は min-height を使用し、更に横方向の最大、最小値は、min-width, max-width プロパティを使用します。
また height を同時に指定した場合は、height の値が ｢max-height｣ の値を上回ることはありません。
<p class="height">高さ120pxのボックス</p>
<p class="max-height">要素の高さが最大値未満</p>
<p class="max-height">要素の高さが最大値をこえた場合。ボックスの高さは最大値を超えません。</p>
<style>
* {
margin: 0;
padding: 0;
}
p {
background-color: #ffe4e1;
display: inline-block;
width: 80px;
float: left;
margin: 10px;
}
.height {
height: 120px;
}
.max-height {
max-height: 120px;
}
</style>上記の例を見てわかるように、指定した値をこえた部分の内容がはみ出てしまっています。このように領域からはみ出てしまった場合の処理を指定するCSSプロパティ overflow を組み合わせて使うことがあります。はみ出てしまった要素を非表示にするには ｢hidden｣ を指定します。後述の使用例を確認してみてください。
値の指定方法
{ max-height: キーワード, 値, パーセント }実数値 + 以下のような単位で指定します。マイナス値は指定できませんので、注意しましょう。
| 値 | 説明 |
|---|---|
| none | 初期値です。最大値の制限をしません。 |
| 値 | px, em, %で指定。マイナス値は指定できません。 |
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
使用例
指定した高さを超えた場合に、はみ出た要素を非表示にする実装例です。
<p class="height">高さ120pxのボックス</p>
<p class="max-height">要素の高さが最大値をこえた場合。ボックスの高さは最大値を超えません。</p>
<style>
* {
margin: 0;
padding: 0;
}
p {
background-color: #ffe4e1;
display: inline-block;
width: 80px;
float: left;
margin: 10px;
}
.height {
height: 120px;
}
.max-height {
max-height: 120px;
overflow: hidden;
}
</style>