• 締切済み

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>

この投稿のマルチメディアは削除されているためご覧いただけません。

みんなの回答

  • maid110
  • ベストアンサー率55% (5/9)
回答No.2

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; }

acef
質問者

補足

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

  • maid110
  • ベストアンサー率55% (5/9)
回答No.1

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

acef
質問者

補足

ご回答ありがとうございます。 すみません、お答えいただいた内容の意図がよく理解できないです。 こちらの質問がわかりにくかったのなら、申し訳ありません。 解決したい事は、左メニュー(#sidebarの箇所)と 右メインコンテンツ(#mainの箇所)が、 今の様に内容が少ない時に、背景色が下まで伸びない事と、 #layoutの背景色がスクロールした時に、 ブラウザに表示されているより下(隠れている部分)が途切れてしまう事です。

関連するQ&A