max-heightプロパティ。
CSSに於ける要素の高さの最大値・max-heightプロパティに関する解説です。
max-heightプロパティとは。
max-heightプロパティは、要素の高さの最大値です。
max-heightプロパティを与えられた場合、ボックスの横幅はこのプロパティで与えられた値より小さい場合はheightプロパティにこの値が与えられたものと見なして処理されます。
max-heightプロパティの書式。
max-heightプロパティの書式は、以下のようになります。
max-height: 値値としては、以下のものが取れます。
inherit- 一番近い上位要素で指定された値を継承します。
none- 高さを無制限とします(デフォルト)。
- パーセンテージ
- 親要素の高さを100％とするパーセンテージです。
但し、親要素にmax-heightプロパティが当てられていないか、当てられていても
auto値である場合は、無意味となります。- 高さが不定となっているため、パーセンテージの算出が無意味と判断される訳です。
- 数値
- 幅を数値で指定します。
値に負値を指定した場合はエラーとなります。
max-heightプロパティの記述例。
例えば、HTMLの<blockquote>要素において、高さを最低10文字分、最大20文字分としたい場合は、
blockquote {min-height: 10em;max-height: 20em;overflow: auto;}
と記述します。
max-heightプロパティに関する注意事項。
max-heightプロパティの仕様上の注意。
狭過ぎて要素が入り切らなくなった場合。
仕様上、max-heightプロパティを当てた結果、当該要素のボックスが狭くなり過ぎて要素が入り切らなくなっても、適宜ボックスを押し拡げるような事はしません。
- 勝手に押し拡げてしまう実装のユーザエージェントもありますが、不正な実装です。
このため、入り切らなくなった場合の挙動を別途overflowプロパティで指定しておく事をお勧めします。
max-heightプロパティとmin-heightプロパティの関係。
max-heightプロパティとmin-heightプロパティとで値の単位が異なる場合などに、min-heightプロパティで指定された最小幅の方がmax-heightプロパティで指定された最大値より大きくなる場合があります。
このような場合には、max-heightプロパティの値はmin-heightプロパティの値に上書きされます。
- 事実上widthプロパティにmin-heightプロパティの値が設定される事になります。
max-heightプロパティの実装上の注意。
ネットスケープ 4.xでの注意事項。
ネットスケープ 4.xでは、max-heightプロパティを実装しておりません。
インターネットエクスプローラでの注意事項。
インターネットエクスプローラでは、ウィンドウズ版 6.xまでマッキントッシュ版 5.xまでのいずれもmax-heightプロパティを実装しておりません。
WAP 2.0での注意事項。
WAP 2.0では、max-heightプロパティは定義されておりません。