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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2010/09/05 18:24:55
  • 終了:2010/09/05 22:36:40

ベストアンサー

id:LimgHT No.1

LimgHT回答回数30ベストアンサー獲得回数102010/09/05 19:47:28

ポイント60pt

現象を確認しました。

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

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

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

id:xnissy

ありがとうございます。

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

2010/09/05 22:33:17
  • id:Cherenkov
    質問がわかりにくいです。
    なにをどうしたいのかわかりません。
    サイドバー全体に背景を付けたいのかな?その場合はcssのbottomを消してみて下さい。
    枠が一部しか表示されないのはborder-rightを指定しているからでは?
    全体を枠で囲いたい場合はborderに変えてみてください。
  • id:xnissy
    説明が下手で申し訳ありません。
    サイドバーは、幅150ピクセルで画面の上端からほぼ下端までのボックスのつもりです。そのボックス全体に背景色がつき、また右のボーダーもボックスめいっぱい表示されることを期待しています。しかし、実際にはそうなりません。
    WebDebeloperで要素の情報を表示させると、div#sidebarはメニュー1〜メニュー3までを囲うボックスになっているようです。しかし、そのボックスと背景色のついている領域とは一致していません。
    今回の場合、CSSのどのような仕様に基づいて背景色がつけられているのか、説明してほしいのです。
  • id:Cherenkov
    http://gyazo.com/c5962429e5623cf36310165f345ca324.png
    こうですか?bottomを消すだけです。
  • id:LimgHT
    ちなみに、FireFox には Firebug というツールがあって、CSSの確認に大変便利です。
    http://getfirebug.com/
    使ってみては如何でしょうか。
  • id:LimgHT
    見落としました。
    bottomが指定されたから、下端が親要素の高さ=<div id="contents">から計算され、
    height:auto;の計算が妨害されている(というかオーバーフローしている)のですね。
     
    確かに Cherenkov さんが正しく
    bottomを外すと height:auto; が正しく反映されます。
  • id:xnissy
    Cherenkovさん、LimgHTさんのコメントのとおり、bottomが指定されたことによって、下端が親要素の高さ=<div id="contents">から計算され、そこまでしか背景色がつかないということのようです。ありがとうございました。Cherenkovさんにもささやかながらポイントをお送りします。

    私が最初にコメントで書いた「画面の上端からほぼ下端までのボックス」というのは、bottomをどこから計算するかというのを完全に間違っていました。失礼しました。

    また類似の質問をさせていただくかもしれませんが、よろしくお願いします。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません