| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {max-height: 値 } |
| 値 の形式 | 数値 （長さ，%） | none |
| 初 期 値 | none |
| 対応ブラウザー | C2+ / e7+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 （非置換のインライン要素，テーブルのコラム，コラム・グループを除く） |
| 継 承 | しない |
max-heightプロパティ は，高さの最大値 を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| 数値 （長さ） | 高さの最大値を長さの単位を付けて指定します。 |
| 数値 （%） | コンテンツのブロックの高さを基準にした百分率（%）で高さの最大値を指定します。 |
| none | 高さには最大値として制限はつけません。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
div.sample { display: inline-block; margin: 10px; padding: 0.1em; border: 0.1em solid #8c8c8c; max-height: 3.4em; } |
| HTML <body> ～ </body> |
<div class="sample">テキスト テキスト</div> <br> <div class="sample"> テキスト テキスト<br> テキスト テキスト </div> <br> <div class="sample"> テキスト テキスト<br> テキスト テキスト<br> テキスト テキスト </div> <br> <div class="sample"> テキスト テキスト<br> テキスト テキスト<br> テキスト テキスト<br> テキスト テキスト<br> テキスト テキスト </div> |
| ブラウザー 表示例 |
|---|
テキスト テキスト
↑ height = 1.4em の表示
テキスト テキスト
テキスト テキスト ↑ height = 2.4em の表示
テキスト テキスト
テキスト テキスト テキスト テキスト ↑ height = max-height = 3.4em の表示
テキスト テキスト
テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト ↑ height = max-height = 3.4em の表示
|
上の例では，sampleクラス の <div> 要素では， padding と border の設定値から，height プロパティ の値は，通常，(行数 ＋ 0.4) [em] となります。 しかし，このクラスでは，max-height プロパティ の値が 3.4em となっていますので，height プロパティ の値は， 3.4em を上限としてそれより大きくはなりません。