- ベストアンサー
firefoxで部分的に背景色が反映されない。
またまたCSS関連の質問です。 body直下に全体を包括するブロックの<div id="container">を設定し、containerの中に3段組（左中央右の3カラム）でレイアウトを組んでいます。 widthはbodyが100%指定、containerは80%指定でセンタリングしてあります。 質問なんですが、 ・bodyのbackground-imageに画像を指定し、 ・containerのbackground-colorに#ffffffを指定しており、 ・3カラムそれぞれの表示要素（コンテンツテキストとか）は、中央が一番縦に長く、左と右はメニュー程度なので下半分くらいが空白になっている状況です。 ・その際、firefox上では、左/右カラムの背景色が、要素がある部分（テキストで埋まってしまっている部分）までは#ffffffとなっているのですが、そこから下（空白部分）がbodyの背景イメージを透過してしまっているのです。 本来なら、bodyに指定した背景イメージは、container幅の80%には表示されない筈なのですが。。。 ちなみに、IE6だと、計算通り左・右カラムとも、一番下部までちゃんと背景色が#ffffffとなっており、できればfirefoxでも同様のデザインを実現したいのですが、ご助言頂けますでしょうか？ なかなか説明が難しく、分かりにくい文章になってしまってすみませんが、よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
フロートされているボックスな子要素の高さは親要素に影響を与え ないのが正しいので、フロートしたボックスだけ並べていると、 containerの高さは0になるはずです。CSSの規格書では、9.5あたり に書いてあります。IEの挙動は間違い。 で、clearすればフロートしている要素の下まで伸びるので、footer 要素を付けるか、最後に無意味にBRするか、 #container:after { clear: both; content: ""; display: block; } とcontainer要素のケツで強制clearするかで、ウマくいきます。
その他の回答 (4)
- fire--
- ベストアンサー率49% (146/293)
ちょうど同じ問題に引っかかって、一番外をテーブルで覆ってごまかして たのですが、このQAを見つけてためした所、うまく行きました。 細かいいろんなパラメータが絡み合っていて、一見関係ないものが 影響しているのかもしれません。 自分のうまく行った例を挙げておきます。 http://www.fsiki.com/archive/css-doc/float.htmlに書いてあった IE対応を特に入れなくてもOKでした。 ---------------------------------------------------------------- #body{width:780px; margin:0px auto 0px auto; padding:0px; border:0px; text-align:left; position:relative; background:#f4ffee; /*eeffdd*/ } #body:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } #maincenter_2 {float:left; width:610px; margin:0px; padding:0px;} #mainright {float:left; width:165px; margin:0px; padding:0px;}
補足
自己解決しました！ どうやら、containerに苦し紛れにheight:100%;を指定していたのが悪かったようです。height指定を削除したら、きちんと全体を包んでくれました。 お答え頂いた皆様に御礼を申し上げます。
- CHI-512
- ベストアンサー率69% (63/91)
こんにちは。時間がないので手短に。 ボックスの順番はどうなってますか？ 下のような順番で試してもだめですか？ <div id="container"> <div class="left"><p>左</p></div> <div class="right"><p>右</p></div> <div class="center"><p>中央</p></div> </div>
補足
はい、ボックスの順番は container left right center footer です。 80%の幅内は、containerが一番下に存在するはずですよね。 であれば、floatさせたleftとrightのheightが短かろうが、その下にはcontainerの白背景が来るはずだと思うのですが。floatさせてなくて、left・center・rightが横に3つ並んでいるだけなら、center部分だけが白背景なのは理解できます。でも、floatさせてるのに・・・ 自分でも色々調べていますが、いまだ解決策見つからず、です（泣）。
- himajin100000
- ベストアンサー率54% (1660/3060)
>floatの内容は親要素の高さには参入されない ちなみにこの様子はFirefox拡張のWebDeveloper,あるいは，同じく拡張のDOM Inspectorで見ると非常にわかりやすい
補足
と言うことは、この現象自体が正しい挙動ってことなのでしょうか？floatの背景色をページ下部まで有効にする方法はないものでしょうかね？？
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ width:100%; background-image:url("nutrition-pie-chart.png"); } div#container{ background-color:pink; width:80%; /* 何故うまくいくのかを考えたことはない。 IE,Fx,Operaでは有無により変化するが，その他のブラウザで上手く行くことは保証できない 確かデフォルトではfloatの内容は親要素の高さには参入されないFirefoxの挙動の方が正しいって聞いたような。 overflow:auto; */ } div#breakfast{ background-color:red; float:left; } div#lunch{ background-color:green; float:left; } div#supper{ background-color:yellow; float:left; } </style> <title>サンプル</title> </head> <body> <!-- こういうことか？--> <div id="container"> <div id="breakfast"> <ul> <li>あんぱん</li> <li>コーヒー牛乳</li> </ul> </div> <div id="lunch"> <ul> <li>てりやきマックセット</li> </ul> </div> <div id="supper"> <ul> <li>鮭のムニエル</li> <li>マカロニサラダ</li> <li>牛肉コロッケ</li> </ul> </div> </div> </body> </html>
補足
書いて頂いたサンプルを保存してfirefoxで開いてみると、やはりそれぞれの背景色は揃ってませんね。。。それがイヤなんですよね。きちんと一番下まで背景色がイキて欲しいんです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
補足
http://www.fsiki.com/archive/css-doc/float.htmlで書いてある解決法ですね。 ちょっと言葉足らずでしたが、footerはclear: both;でfloatを解除する形で指定してあります。 全体の構成は、 body：width100%、background-image指定アリ -container→width80%、センタリング、background-color指定アリ（white） -header→width設定なし -leftmenu→float:left -maincontents -rightmenu→float:right -footer→clear: both ってな感じです。 今回やりたいことは、 ・container：width80%の外側（左右10%）部分に、bodyに指定した背景画像を出したい。 ・container：width80%の内側はbackground-color:whiteで塗りつぶしたい。 ということです。 しかし、中央のmaincontents部分にテキストコンテンツをたくさん記述しているために、ページ自体は長くなっているのですが、leftとrightのfloatボックスのコンテンツはmenuのみのため、ボックスのheightは短くなっちゃってます。 そうした時に、中央のmaincontentsは白背景なのですが、leftとrightはボックスのheightが短く切れてしまうため、ボックスの下部にbodyで指定した背景画像が出てきてしまっているのです。 これを、container：width80%を白でベタ塗りするような処理はできないものかと思い、質問した次第です。