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

Question

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

我遇到的问题是,当视口缩小到小于为某些元素指定的大小时,背景颜色会出现意外行为.当滚动条正确显示时,背景不是我所期望的.当视口大或大时,背景表现如预期.使用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;
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pat*_*Pat 8

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

您可以通过向元素的CSS 添加最小宽度声明来修复它body.只需将其设置为最大嵌套元素的宽度:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，9 月前
查看次数：	3612 次
最近记录：	15 年前