トップページの中の プロパティの中の Mのプロパティ一覧の中の max-height

max-height

  • 最終更新:2009年11月23日 02:35

max-heightプロパティは、ボックスの最大の高さを指定します。

最大の高さを指定する事でボックス内の内容が多くなった場合などにoverflowプロパティとあわせて使えばレイアウトが崩れずに済んだりといった使い方が考えられます。

尚、IE6はmax-heightプロパティに対応していません。
対応させるには、JSを使ったりIE独自拡張のexpressionを使った方法やCSSだけで実現する方法など色々有るので、試してみて自分に合った方法を使うといいと思います。

対応ブラウザ
  • IE6未対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

<長さ>|<パーセント>|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;の指定が反映されスクロールバーが表示されます。

このページの上部へ