bodyに背景画像を設定したのですがその子要素の大きさまでしか表示されません(FireFox)

締切済

質問者：Musicful-hearts
質問日時：2007/05/02 00:08
回答数：1件

使用しているのは忍者ブログ、
コメント編集画面で発覚したのですが…

HTMLはこんな感じ
<body>
<div id="mainBlock">
<div class="CommentBlock">
ここにコメント編集フォーム
</div>
<div id="FooterBlock">
ここに著作権表示(コピーライトなど)
</div>
</div>
</body>

CSSはこんな感じ
body{
margin:0px;
padding:0px;
background:url(../image/bg_bottom.png) repeat-x scroll left bottom;
}
#mainBlock{
margin:0px auto;
padding:0pt 10px;
width:900px;
background-color:#FFFFFF;
}

また、DOCTYPEはURL有りのhtml4.01 strictです。

IEで表示したときはbodyの背景画像が画面の最下部に並んだのですが、
FireFoxで表示したときはmainBlockの高さの最下部に並び、
mainBlockの下に何も表示されない白い空白ができてしまいました。
FireFozでもIEと同じように実装したいのですが、
アドバイスをもらえませんか？
お願いします。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1

回答者： Muller3
回答日時：2007/05/02 22:50

scrollを指定してらっしゃるのであたりまえの動きかと・・・・・・

というか、この指定で画面最下部に表示されるのって、IEだけだと思いますよ。

＞FireFoxで表示したときはmainBlockの高さの最下部に並び、
そのページは、body要素自体が画面の中で収まっている（スクロールバーが出ない高さ）のでは。
ということは、body要素が画面途中で終わっている=中途半端な位置にbodyの最下部がある=そこに背景画像が表示されているのでは。

fixedを指定したら画面最下部に出ると思いますが。
fixedがいやならmainBlockに十分な高さを与えてやるか。