CSSで背景を下までのばすには？

質問

左側にコンテンツ、右側に本文がきているようなレイアウトで、
両方とも背景色があります。
コンテンツは5行くらいしかないのですが、本文はもちろん何十行もあります。
本文側は問題なく下まで背景色がくるのですが、コンテンツ側の背景色だけが途中で途切れます。
height:100%にしてもheight:autoにしてもだめなんです。

このサイトに解決法があったのですが、IEではだめでした。
http://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/

ちなみにこのサイトの「下まで背景伸びたHTML完成サンプル」でも
IEは下まで背景がきません。当方Macなのですがそのせいでしょうか？
WinのIEで正確に見えているなら、Macでは狂っても構わないのですが、
確かめようがないので困っています。

もしくは他に背景色を下までくるようにする方法がありましたらご教授ください。

回答No.1

vista2446 · ベストアンサー

2つのブロックを1つのブロックの中に入れて、そのブロックにコンテンツの背景色を設定してはどうでしょうか。
CSS
#main{
width: 700px;
background-color:（コンテンツ背景色）;
overflow: auto;
}
#contents{
width: 250px;
float: left;
}
#text{
width: 450px;
background-color:（本文背景色）;
float: right;
}
HTML
<div id="main">
<div id="contents">
（コンテンツ）
</div>
<div id="text">
（本文）
</div>
</div>
WinIE7、Opera、FirefoxではOKでしたので、Macでも大丈夫だと思うのですが。。。

お礼

回答ありがとうございます。

ごめんなさい。
Macではだめでした～

途中までは背景色が表示されるのですが途切れちゃって…

回答No.3

vista2446

#1です。お礼の中に「途中までは背景色が表示されるのですが途切れちゃって…」とありますが、提示したソースの場合、コンテンツ背景色が全く表示されないかご希望の表示になるかで、途中で途切れることはあり得ないと思うのですが、、、MacIEはoverflowで不具合があるらしいですが、下記のソースも試してみてください。余談ですが、私はMacがほしい。。。(´ρ` )

【CSS】
#contents{
width: 700px;
background-color:（コンテンツ背景色）;
overflow: hidden;
}
#text{
width: 450px;
background-color:（本文背景色）;
float: right;
}
【HTML】
<div id="contents">
<div id="text">
（本文）
</div>
（コンテンツ）
</div>

お礼

再度のご回答ありがとうございます。

途切れちゃうんですよ～
しかもコンテンツの高さまでとかではなく、
なんでここで？っていう意味のわからない場所で途切れちゃうんです…

回答No.2

leap_day

こんにちは

<style type="text/css">
<!--
#contents {
float:left;
width:200px;
height:100%;
background-color:aqua;
}
#main {
height:100%;
background-color:lavender;
}
//-->
</style>

<div id="contents">
a
</div>
<div id="main">
b
</div>

これでIE6(Win),Opera,Firefoxで下まで塗りつぶせてます（＾＾）
もし画面いっぱいにしたいのであれば

<style>～</style>内に
body {
margin:0px;
}

を入れれば画面いっぱい塗りつぶせます

参考サイトも下までいっているようですね(左側の色の方ですよね？)

スクロールさせるとcontentsの方の背景色が途切れるけどそのことなのかな？
ダメなら本文の方は下まであるのでコンテンツの背景色をbodyの背景色とかにしてみてはどうですかね？

お礼

回答ありがとうございます。

ごめんなさい。
Macではだめでした～

途中までは背景色が表示されるのですが途切れちゃって…

Macでは参考サイトも下までいってなくて途切れているのです…