- 締切済み
CSSで背景色を下まで表示させたい
左がメニュー、右がメインコンテンツになるサイトを作っています。 左右のボックスの背景色を下まで伸ばしたいのですが、 いろいろなサイトを見て回って、その通りに指定しているはずなのですが、 うまく行きません。 #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-transitional.dtd"> <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)
- 専門家の回答
みんなの回答
- maid110
- ベストアンサー率55% (5/9)
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; }
- maid110
- ベストアンサー率55% (5/9)
html{ height:100%; } のところを以下のようにしてもいいのでは? html{ height:100%; background:#FF0000; } もちろん#FF0000(赤)は変更してください。
補足
ご回答ありがとうございます。 すみません、お答えいただいた内容の意図がよく理解できないです。 こちらの質問がわかりにくかったのなら、申し訳ありません。 解決したい事は、左メニュー(#sidebarの箇所)と 右メインコンテンツ(#mainの箇所)が、 今の様に内容が少ない時に、背景色が下まで伸びない事と、 #layoutの背景色がスクロールした時に、 ブラウザに表示されているより下(隠れている部分)が途切れてしまう事です。
補足
どの部分を書いて頂いたソースに書き換えればよいのでしょうか? wrapperがlayout、outerがmain、innerがsidebarに対応しているのでしょうか? また、borderの設定がいきなり出てきましたが、 ボックスに罫線をつける予定はありません。 罫線を付けないと正しく表示されないという事ですか?