高さの割合を正しく求める場合、その高さの基になる高さが必要になります。 CSSの定義では、パーセントは、生成されたボックスの包含ブロックの高さに 関して計算されるとあります。また、heightの高さが指定されてない場合、 heightの初期値はautoとなります。 (参考: 仕様書(邦訳))
包含関係のルート要素はUserAgentによって定める事になっているので、 htmlの高さを明示的に100%に指定します。次にbodyの高さを明示的に100%に指定します。
このようにすることによってbody以下の要素に対して高さを指定する基準を明示的に設定します。
CSSの例
*{ margin:0; padding:0; } html{ height:100%; } body{ height:100%; margin:0 30px 0 30px; } #container{ height:100%; border-left:1px dotted #F6800B; border-right:1px dotted #F6800B; } body > #container { height: auto; }
body > #containerを指定することで、1画面を超える長さのでの表示を 正しく行うようにします。
Copyright 1997-2010 BBB All rights reserved.