max-height
max-heightプロパティは、ボックスの最大の高さを指定します。
最大の高さを指定する事でボックス内の内容が多くなった場合などにoverflowプロパティとあわせて使えばレイアウトが崩れずに済んだりといった使い方が考えられます。
尚、IE6はmax-heightプロパティに対応していません。
対応させるには、JSを使ったりIE独自拡張のexpressionを使った方法やCSSだけで実現する方法など色々有るので、試してみて自分に合った方法を使うといいと思います。
- min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]
- [CSS]IEで、min-widthやmax-widthを実現する方法 | コリス
- 対応ブラウザ
-
プロパティの解説
- 値
- <長さ>|<パーセント>|none|inherit
- 初期値
- none
- 適用される要素
-
全ての要素
(非置換インライン要素及びテーブルの列・列グループ要素は除く) - 継承
- しません
- パーセント値
- 包含ブロックの幅に対する割合
- メディア
- visual
値の解説
- <長さ>
- 高さを長さの単位で指定します(300pxとか)。尚、マイナス値は不正です。
- <パーセント>
- 包含ブロックの高さに対する割合を指定します。尚、マイナス値は不正です。
- none
- 高さに対して制限をしません。
max-heightのサンプル
.sample01 {
margin: 20px 20px 30px;
}
.sample01 .item {
width: 230px;
overflow: auto;
max-height: 120px;
margin-bottom: 15px;
background: #fee;
}
<div class="sample01">
<div class="item">
<p>max-heightプロパティのサンプル</p>
</div>
<div class="item">
<p>max-heightプロパティのサンプル max-heightプロパティのサンプル</p>
</div>
<div class="item">
<p>max-heightプロパティのサンプル...(略)</p>
</div>
<div class="item">
<p>max-heightプロパティのサンプル...(略)</p>
</div>
<!-- / .sample01 --></div>
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
max-heightプロパティのサンプル
max-heightプロパティのサンプル max-heightプロパティのサンプル
max-heightプロパティのサンプル max-heightプロパティのサンプル max-heightプロパティのサンプル max-heightプロパティのサンプル
max-heightプロパティのサンプル max-heightプロパティのサンプル max-heightプロパティのサンプル max-heightプロパティのサンプル max-heightプロパティのサンプル max-heightプロパティのサンプル
高さが指定値以上になった場合に、overflow: auto;
の指定が反映されスクロールバーが表示されます。