人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記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>

1283678693
●拡大する

●質問者: xnissy
●カテゴリ:ウェブ制作
✍キーワード:absolute background-color border firefox HTML
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● LimgHT
●60ポイント ベストアンサー

現象を確認しました。

ちょっと複雑なので、一応、次のリンクに解説を加える形で答えてみます。

http://www008.upp.so-net.ne.jp/mo--/css2/visual/position2.htm


真ん中あたりに「absoluteな包含ブロック(block)との関係」の節があります。

実線枠が <div id="sidebar"> に対応した、absolute 属性適応要素です。

点線枠が <div id="outerframe"> に対応した、上の対象を包含する親要素です。


ここで、ポイントは、緑の点線枠が1点に縮めていることです。

absolute 属性の場合、高さは親要素の高さ計算に使われない仕様のため、

absolute 属性の要素しか包含してない親要素の幅も高さも0になってます。


質問者のコードに戻りますと、

<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...

(※ 仕様書に根拠を求める人への参考です。特に読む必要はありません。)

◎質問者からの返答

ありがとうございます。

コメント欄も含めて大変参考になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ