要素の高さの最大値と最小値を指定する

min-height/max-height

解説

要素の高さやボックスの高さをブラウザの画面に合わせて表示させるには、「height」プロパティにおいて、値をパーセントなどの相対的な数値で指定すれば可能です。

こうすれば、ブラウザの画面サイズに依存しないレイアウトにできます。

しかし、画面を極端に狭くして閲覧すると、レイアウトにも限界が生じ、レイアウトが崩れることもあります。

また、逆に高さを極端に高くして見た場合には高さが広がりすぎて見にくくなってしまうこともあります。

解決法

これを解決するために、要素の高さの可動範囲を予め指定しておくことができます。

これを実現するのが「min-height、max-height」プロパティです。

これらのプロパティにおいて、要素の高さの最小値と最大値を指定します。

指定方法

「height」プロパティと同様に、サイズ（数値）やパーセントによる指定が可能です。

ただし、厳格な最小値と最大値を定めるための値ですので、一般的にはポイントなどの絶対的な数値で定めておくのが普通です。

ちなみに、最大値の初期値の「none」は高さに上限なしという意味です。

挙動に注意

ただし、要素の高さは「min-width/max-width」プロパティと異なり、要素内の内容に応じて変化しますので挙動に注意してください。

これは「min-height/max-height」プロパティのバグではなく、「height」プロパティの仕様です。

IEは一部だけ対応

InternetExplorer6.0は「min-height」プロパティを一部の要素に使用できます。

一部の要素とは、「table-layout」プロパティの値が「fixed」と設定されている表の「TD、TH、TR」要素です。

この条件を満たす要素には「min-height」プロパティを使用できます。

もちろん上以外の、IE6.0以前のバージョンや「max-height」プロパティ等にはまだ対応していません。