Question

我遇到的问题是，当视口缩小到小于为某些元素指定的大小时，背景颜色会出现意外行为。当滚动条正确显示时，背景不是我所期望的。当视口大或大时，背景表现如预期。使用Firebug检查页面元素时，body元素似乎没有拉伸，即使它内部的内容是。是什么导致背景以这种方式表现？

我提供了我认为相关的html和CSS，但如果我省略了什么，请告诉我。

缩小视口示例 Broken Example

放大的视口示例 Working Example

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>

Answer 1

您看到此行为的原因是因为您的width: 100%元素仅将视口宽度视为需要渲染的背景数量。

您可以通过在body元素的CSS中添加min-width declaration来解决此问题。只需将其设置为最大嵌套元素的宽度：

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

Answer 2

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" );
}

视口宽度导致背景未按预期显示

2 个答案: