下記htmlにおいて、コンテンツ(div#contents)の内容が少ない場合、サイドバー(div#sidebar)の背景や枠が一部しか表示されません(Firefoxで確認)。その理由が理解できるURLを教えてください。
※ただし仕様書のURLを示されても理解できませんので、そのような場合は分かりやすく説明してください。
<html><head>
<style type="text/css">
#outerframe{
position: relative;
}
#sidebar{
position: absolute;
top: 0;
left: 0;
bottom: 5px;
height: auto;
width: 150px;
border-right: 1px solid gray;
background-color: #bbffcc;
}
#contents{
margin-left:160px;
}
</style>
</head>
<body>
<div id="outerframe">
<div id="sidebar">
メニュー1<br>メニュー2<br>メニュー3
</div>
<div id="contents">
内容が少ない場合
</div>
</div>
</body></html>
No.1
30
10
60pt
現象を確認しました。
ちょっと複雑なので、一応、次のリンクに解説を加える形で答えてみます。
http://www008.upp.so-net.ne.jp/mo--/css2/visual/position2.htm
真ん中あたりに「absoluteな包含ブロック(block)との関係」の節があります。
実線枠が ＜div id="sidebar"＞ に対応した、absolute 属性適応要素です。
点線枠が ＜div id="outerframe"＞ に対応した、上の対象を包含する親要素です。
ここで、ポイントは、緑の点線枠が１点に縮めていることです。
absolute 属性の場合、高さは親要素の高さ計算に使われない仕様のため、
absolute 属性の要素しか包含してない親要素の幅も高さも０になってます。
質問者のコードに戻りますと、
＜div id="outerframe"＞ の高さの計算に、＜div id="sidebar"＞ が使われません。
しかし、＜div id="contents"＞ は無指定（＝static属性）のために使われます。
他に影響を与える要素はもうないので、
＜div id="outerframe"＞ の高さは ＜div id="contents"＞ の高さで決まります。
ちなみに、IEは……恐らくバグと思います。（独自）仕様とも言います＾＾；
なお、質問では width について全く触れてませんので、心配のため補足しますと。
width も heightと同じく、ちょっと変な描画になっています。
＜div id="outerframe"＞ は div タグのため、幅が画面一杯の100%となっています。
枠か背景色を設定して見ると確認できます。
また、以上の判断は、仕様書にある：CSS2 の height の計算を根拠にしています。
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#th...
（※ 仕様書に根拠を求める人への参考です。特に読む必要はありません。）
Cherenkov
2010/09/05 18:34:18
46
19
xnissy
LimgHT
1
1
1
ありがとうございます。
コメント欄も含めて大変参考になりました。