CSSで背景色を下まで表示させたい

締切済

質問者：acef
質問日時：2009/09/06 06:41
回答数：2件

左がメニュー、右がメインコンテンツになるサイトを作っています。
左右のボックスの背景色を下まで伸ばしたいのですが、
いろいろなサイトを見て回って、その通りに指定しているはずなのですが、
うまく行きません。

#layoutの中に#sidebarと#mainを入れ子にしてあります。
#layoutの背景色（完成後は背景色はなしにする予定）は下まで表示されますが、
#sidebarと#mainの背景色が下まで表示されません。
また、ブラウザの縦幅をすごく短くしてスクロールした時に、
#layoutの背景色がその縦幅より下は表示されなくなってしまいます。

今まではテーブルで作っていて、CSSとXHTMLを使うのは初めてです。
以下にソースを置いておきますので、ご回答よろしくお願いします。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">

<head>
<title>背景画像を下まで表示したい</title>
<style type="text/css">

*{
margin:0;padding:0;
}

html{
height:100%;
}

body{
margin: 0px;
padding: 0px;
height:100%;
background-color:#DDDDDD;
text-align:center;
font-size: 11px;
line-height:18px;
font-family: sans-serif;
color: #000000;
}

/*レイアウト指定*/
#layout{
margin: 0px auto;
width: 960px;
height:100%;
min-height:100%;
text-align:left;
background-color:#000000;
}

body > #layout {
height: auto;
}

#main{
float:right;
margin:0px;
padding:50px 34px 0px 34px;
width:640px;
height:100%;
min-height:100%;
background-color:#FFFFFF;
}

#sidebar{
float:left;
margin:0px;
padding:40px 30px 0px 0px;
width:218px;
height:100%;
min-height:100%;
background-color:#999999;
}

/*クリア*/
.clear { clear:both; }
.clear hr { display:none; }

/*罫線指定*/
.borderA { border-bottom:solid 1px #888888; margin-top:37px; margin-bottom:10px;}
</style>
</head>

<body>
<div id="layout">
<div id="main">
メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />
<p class="borderA"></p>
<p>Copyright(C) xxxxxxxxxxx. All Rights Reserved.</p>
</div>
<div id="sidebar">
メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />
</div>
</div>
<div class="clear"><hr /></div>
</body>
</html>

※添付画像が削除されました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： maid110
回答日時：2009/09/07 10:36

maid110です。

ああ、ごめんなさい。背景全体ではなかったのですね？
でしたら、外枠の設定、中枠の設定、そしてその中で左、メイン、
右と設定するのはいかがでしょうか？
これを簡単に省略してしまうとIEやFirefoxなどのブラウザで表示が狂ってしまうという現象が
起こりかねないともいえませんので、多少面倒くさいかもしれませんが。

以下その部分だけのサンプルです。
.wrapper {
min-width:400px;
width:100%;
margin: 0 -1px;
}
.outer {
width:auto;
/* left column width and color */
border-left:200px solid #ff8080/*左ペインの背景色*/;
/* right column width and color */
border-right:180px solid #ff8080/*右ペインの背景色*/;
/* center column colour */
background:#FFF;
}
.inner {
margin:0;
width:100%;
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
/* Mozilla code */
.outer > .inner {
border-bottom:1px solid transparent;
}

この回答への補足

どの部分を書いて頂いたソースに書き換えればよいのでしょうか？
wrapperがlayout、outerがmain、innerがsidebarに対応しているのでしょうか？
また、borderの設定がいきなり出てきましたが、
ボックスに罫線をつける予定はありません。
罫線を付けないと正しく表示されないという事ですか？

補足日時：2009/09/07 14:31

通報する

- 0
- 件

通報する

No.1

回答者： maid110
回答日時：2009/09/06 13:30

html{

height:100%;
}
のところを以下のようにしてもいいのでは？
html{
height:100%;
background:#FF0000;
}
もちろん#FF0000（赤）は変更してください。

この回答への補足

ご回答ありがとうございます。
すみません、お答えいただいた内容の意図がよく理解できないです。
こちらの質問がわかりにくかったのなら、申し訳ありません。

解決したい事は、左メニュー（#sidebarの箇所）と
右メインコンテンツ（#mainの箇所）が、
今の様に内容が少ない時に、背景色が下まで伸びない事と、
#layoutの背景色がスクロールした時に、
ブラウザに表示されているより下（隠れている部分）が途切れてしまう事です。

補足日時：2009/09/06 23:32

通報する