0

我有一个 body 的背景图像和一个包装 div 的背景颜色。我没有为 body 设置任何高度，我使用 min-height:1000px 进行包装。但如果 wrapper 高度扩展 1000px;，则 wrapper 的背景颜色为 body 背景图像。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;
}

我怎样才能解决这个包装器的背景颜色问题。

4

2 回答 2

0

正如您对页面进行编码的方式一样，您无法让包装器覆盖整个高度。所以最好的方法是为你的全身制作一个背景图像，如下所示：

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

使其宽 2000 像素（或更多），高 1 像素，然后垂直重复：

background:#E8EDF0 url(new-background-path.jpg) top center repeat-y;
于 2012-09-28T08:43:22.033 回答
0

只需添加<div style="clear:both"></div>pagecontainer1 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>
于 2012-09-28T09:04:52.530 回答