- ベストアンサー
Firefoxで背景画像がスクロールで消える問題
- firefoxで見るとdiv背景画像がスクロールで消えてしまいます。
- FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。
- 解決に至る方法をご教示いただきたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
# 教えて！goo は不便なルールがありますが、このようにページを提示されると検証しやすいです。 ※ 提示されたページと質問文内のソースに差異があります。 ※ 提示されたページのソースに対して回答します。 ## まず、文書型宣言がありません。 ## DTDが必須ということより、構成を実現する際の height の適用が異なります。 このままでも実現できますが、基本的に適切な文書型を宣言するようにしましょう。 html, body { height:100%; /* ● 表示領域に対する高さを確保します */ } body { text-align:center; margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; min-height:100%; /* ● height ではなく min-height が理想を満足する指定です */ text-align:center; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } * html #side_bg { height:100%; /* ● IE7 quirk mode, IE6 以前 のIEでは min-height に対応してませんが、height が min-height として振る舞うバグがあるため、これを利用します */ } #outline { width:830px; text-align:left; margin:0 auto; padding-top:15px; /* ▼ #A01 での上マージンをここの上パディングで表現します */ background-color:#FFFFFF; } .c-both { display:block; /* ▼ br 要素に対して適用するのであれば、少なくともブロックレベルにする必要があります */ clear:both; } /* A */ #A01{ width:830px; margin:0px 0px 4px 0px; /* ▼ ここでの上マージンは理想に反した結果となります -> #outline */ font-size:8pt; color:#7F7F7F; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; text-align:right; float:right; margin-top:4px; } /* B */ #B01{ width:730px; margin:20px 50px; font-size:10pt; color:#666666; } /* footer */ .footer_margin{ font-size:9pt; color:#666666; text-align:center; margin:5px 0px 30px 0px; } 質問されたことに直接関係する指定は、コメントの文頭に●があるものです。 ▼ .c-both というクラスに対する clear 関連の指定がありますが、clear プロパティはブロックレベル要素にしか適用できません。 だからといって、空の div 要素を置いて指定するのは妥当性をクリアしますが適合性に反します。 このような場合、本来であれば以下のページに示されているように対処すべきです。 http://www.geocities.jp/multi_column/float/05.html http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html 今回は、適合性に反しますが br 要素のままにしています。 # 本当は修正すべきですが、そこまで求める必要もないのでこのままでも結構です。 ▼ #A01 に対する上マージンが指定されていますが、 float や position がデフォルトのボックスに関して、 上マージンが指定されている要素の先祖要素が、ボーダーかパディングを正値で持っていない場合、上マージンはその要素ではなく、先祖要素の上マージンとして振る舞われます。 理想を実現するには、その要素に対する上マージンではなく、その要素の先祖要素に対して上パディングを与えるか、間にボーダーかパディングを挟む必要があります。 今回は、min-height:100% という指定によって、表示領域の100%の値を用いているため、margin, border, padding はこれより子孫要素で指定する必要があります。 #box{ height:100%; margin-top:20px; } などと指定すると、実際の id="box" の高さは、100% + 20px となってしまいます。 IE quirk mode では、ボックスモデルという概念において、これが 100% と解釈されるバグがあります。 IE6 及び IE7 の standard mode では、仕様通り 100% + 20px と解釈されます。 結果的に、#A01 の先祖要素であり、質問の内容のために height を指定した #side_bg の子孫要素である #outline に padding-top:15px を指定しています。 今回質問された内容は、少し複雑なブラウザ実装の事情もあるので理解しきれないかもしれませんが、 ポイントは、height ではなく min-height を使う、ということです。 これを変えただけでは、内容が少ないときに IE で高さ 100% が確保されないので面倒なこともする必要が出てきてしまいます。 #A01 の上マージンに関する内容は、バグではなく仕様です。
お礼
大変丁寧な解説に感謝致します。 ご指摘を受けた箇所を修正いたしましたところ、無事ブラウザ間でデザインを損なわないページにすることが出来ました。全体的に細かい指定の意図を理解できていなかったようです。 マージンとパディングに関しても使い分けをいまひとつ理解できておりませんでしたが、quadsさんのご意見で考え方がまとまり書き込みをして良かったと思います。 有難う御座いました。