CSS ・ 余白・サイズ
max-height
最大の高さ
要素の高さがこれより高くならないように、上限を指定します。overflow と組み合わせて、はみ出した部分をスクロールさせるのに使います。
01
サンプルコード
HTML
1<div class="box">
2 <p>1. 利用規約に同意してください。</p>
3 <p>2. 個人情報は適切に管理します。</p>
4 <p>3. 内容は予告なく変更することがあります。</p>
5 <p>4. お問い合わせはフォームから受け付けます。</p>
6</div>
CSS
1.box {
2 max-height: 100px;
3 overflow-y: auto;
4 padding: 0 12px;
5 border: 1px solid #b68235;
6}
02
実行結果
ブラウザでの表示
03
解説
max-height は、高さの上限を決めるプロパティです。内容が少なければ内容に合わせた高さになり、多くても指定した高さで止まります。
上限を超えた内容は、そのままでは枠の外にはみ出します。overflow-y: auto と組み合わせると、はみ出した部分をスクロールして読めるようになります。
height と両方を指定した場合、小さいほうが使われます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
none | 上限なし（初期値） |
100px | 固定の上限 |
50vh | 画面の高さの半分まで |
50% | 親要素の高さの50%（親の高さが必要） |
画像の高さをそろえる
縦長の画像が大きくなりすぎないよう、高さに上限を付けます。
CSS
1img {
2 max-width: 100%;
3 max-height: 300px;
4 object-fit: contain;
5}
注意点
- 01スクロールする箱の中に大事な情報を隠さないようにします。スクロールできることに気づかれない場合があります。