5

一部の要素に指定されたサイズよりも小さいサイズにビューポートを縮小すると、背景色が予期しない動作をするという問題が発生しています。スクロール バーは正しく表示されますが、背景は期待どおりではありません。ビューポートが同じかそれ以上の場合、背景は意図したとおりに動作します。Firebug を使用してページ要素を検査すると、body要素内のコンテンツが伸びていても、要素が伸びていないように見えます。背景がこのように動作する原因は何ですか?

関連する html と CSS であると思われるものを提供しましたが、省略したものがある場合はお知らせください。

縮小されたビューポートの例 壊れた例

拡大ビューポートの例 実施例

CSS

html
{
    background: #A37C45;
}

body
{
    background:
      #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}

#container
{
    width: 100%;
}

#header
{
    width: 730px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    overflow: hidden;
}

#main
{
    width: 730px;
    margin-top: 2px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#footer
{
    background:
      url("../images/backgrounds/grass.png") repeat-x scroll left top;
    clear: both;
    width: 100%;
    overflow: hidden;
    padding-top: 30px;
    margin-top: 20px;
}

#footercontainer
{
    width: 100%;
    background-color: #A37C45;
    margin-top: -1px;
}

#footercontent
{
    width: 730px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 25px;
    overflow: hidden;
}

HTML

<html>
  <body>
    <div id="container">
      <div id="header">
      </div>
      <div id="main">
      </div>
    </div>
    <div id="footer">
      <div id="footercontainer"> 
        <div id="footercontent">
        </div>
      </div>
    </div>
  </body>
</html>
4

2 に答える 2

8

この動作が見られるのは、width: 100%要素がレンダリングに必要な背景の量としてビューポートの幅のみを使用しているためです。

要素の CSSにmin-width 宣言を追加することで修正できます。bodyネストされた要素の最大幅に設定するだけです。

body {
    min-width: 730px;
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
于 2010-09-20T19:21:12.813 に答える
0

min-width は IE ではサポートされていないため、次の式を使用してください

body {
    min-width: 730px;
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;

    /* IE Version */
    width:expression(document.body.clientWidth < 730 ? "728px" : "auto" );
}
于 2011-05-31T15:49:20.693 に答える