CSSで、要素の高さを指定するheightプロパティに関する解説です。
heightプロパティは、要素の高さを指定するプロパティです。
heightプロパティの書式は、以下のようになります。
height: 値値としては、以下のものが取れます。
inheritautoなどの他の要因により適宜横幅が決められます(デフォルト)。
親要素の高さを100％とするパーセンテージです。
但し、親要素にheightプロパティが当てられていないか、当てられていてもauto値である場合は、auto値扱いとなります。
値に負値を指定した場合はエラーとなります。
例えば、HTMLの<blockquote>要素において、高さを10文字分としたい場合は、
blockquote {height: 10em;overflow: auto;}
と記述します。
置換インライン要素の場合、当該オブジェクト固有の横幅があり、この横幅と異なるheightプロパティ値が与えられた場合、適宜拡大縮小する事が許されます。
仕様上、heightプロパティを当てた結果、当該要素のボックスが狭くなり過ぎて要素が入り切らなくなっても、適宜ボックスを押し拡げるような事はしません。
このため、入り切らなくなった場合の挙動を別途overflowプロパティで指定しておく事をお勧めします。
ネットスケープ 4.xでは、heightプロパティは実装されておりません。
CSS第二水準までは、widthプロパティとheightプロパティは仕様上全く無関係なものとなっておりました。
すなわち、CSS第二水準まででは、置換要素に於いて、
幅は元の要素の幅そのものとなり、高さだけがheightプロパティの影響を受ける事になります。
すなわち、仕様上では上記の場合、高さだけが引き伸ばされたり縮められたりして、縦横比が変動する事になる訳です。
勿論、逆に
の場合は、幅だけが引き伸ばされたり縮められる事になります。
このように実装が仕様に従っていない実情から、現在策定中のCSS第二水準第一改訂版(CSS 2.1)では、上記のように片方がauto値、もう片方が非auto値の場合にはauto値を与えられたプロパティももう片方に併せて設定されるものとする、すなわち現状を追認する予定になっております。
以下に、現在策定中のCSS第二水準第一改訂版での該当箇所を挙げておきます(いずれも英語です)。
インターネットエクスプローラでは、以下の場合を除いて、heightプロパティで定められた横幅には、パディング(paddingプロパティなどで指定)と枠線(ボーダ)の幅(border-widthプロパティなどで指定)が加算されたものとなります。
