Question

我有一个正文的背景图片和包装div的背景颜色。我没有为身体设置任何高度，我使用最小高度：1000px用于包装。但如果包装纸高度延伸1000px ;,包装纸的背景颜色为主体背景图像。 HTML代码：

<body>
 <div id="wrapper">
  <div id="header">
    <div id="headercontainer">
      <div id="company"></div>
      <div id="tagline"></div>
      <div id="navigation"></div>
    </div>
  </div>
  <div id="pagecontainer1"></div>
  <div id="footer1"></div>
</div>

这是css：

body{
background:#E8EDF0;
    margin:0;
width:100%;
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
background-position: 0px -2335px;}
#wrapper{
background-color:#FFF;
min-height:1000px;
width:1008px;
margin:auto;
position:relative;
overflow:visible;
}

如何修复包装器的背景颜色问题。

Answer 1

按照您对页面进行编码的方式，您无法使包装器覆盖整个高度。因此，最好的方法是为您的全身制作一个背景图像：

灰色区域## -----白色区域：1008px ----- ###灰色区域

使其宽度为2000px（或更高），高度为1px，并垂直重复：

background:#E8EDF0 url(new-background-path.jpg) top center repeat-y;

Answer 2

只需在pagecontainer1 div中添加<div style="clear:both"></div>即可。因为我认为有一些浮动div所以要清除浮动使用浮动清除或者你可以使用溢出：隐藏;而不是溢出：可见;

<div id="wrapper">
  <div id="header">
    <div id="headercontainer">
      <div id="company"></div>
      <div id="tagline"></div>
      <div id="navigation"></div>
    </div>
  </div>
  <div id="pagecontainer1">
    <div style="clear:both"></div>
  </div>
  <div id="footer1"></div>
  <div style="clear:both"></div>
</div>

内部div的最小高度后溢出的背景颜色

2 个答案:

灰色区域## -----白色区域：1008px ----- ###灰色区域