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

IE 不支持 min-width 所以使用表达式

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 回答