logo标签列表

视口宽度导致背景显示异常

csshtmlviewport
5
我遇到了一个问题，当viewport缩小到某些元素指定的大小以下时，背景颜色的行为出现异常。尽管滚动条显示正常，但背景不是我期望的。当viewport的大小等于或大于所需大小时，背景会按预期行为。使用Firebug检查页面元素时，似乎`body`元素没有被拉伸，即使它内部的内容有被拉伸。是什么导致背景表现出这种行为？
我提供了我认为相关的HTML和CSS，但如果我漏掉了什么，请告诉我。
缩小Viewport示例： Broken Example 放大Viewport示例： 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>
2个回答
7
您看到这种行为的原因是因为您的width: 100%元素仅将视口宽度作为需要呈现背景的量。
您可以通过在body元素的CSS中添加min-width声明来解决此问题。只需将其设置为最大嵌套元素的宽度即可：
body {
    min-width: 730px;
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
0

在IE中不支持min-width，因此请使用expression表达式

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" );
}
我从未见过在IE中无法工作的情况。有特定的版本我应该知道吗？ - ahsteele
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接