Question

我有一个div，content2有我的背景颜色并且有一个高度：auto和width：100％和content2中的另一个div，名为extensive_look，它是我的内容的容器，因此具有固定的宽度，居中（带有margin：0 auto），但没有背景颜色。我们的想法是内容将内容结构化为一定宽度，而content2则提供跨越整个页面宽度的背景颜色。

问题在于，似乎content2并未涵盖其背景颜色中的所有内容。我首先想到的可能是因为extensive_look有位置：relative; top：20px;但即使删除它也无法解决问题。如果您向下滚动到好的示例部分并查看该部分的底部，您将看到背景颜色提前结束，我可以看到我正在谈论的问题here。我该如何解决这个问题。我的代码如下。

HTML

<div class="content2">
   <div id="extensive_look" style="width:1000px;margin:0  auto;position:relative;top:20px;height:auto;">
     <h1 align="center">Good Website Examples</h1> 
     <p>Check out these websites for some inspiration and real life carrying out of design  principles. See if you can spot the different components of websites on each of these. Which sites have sidebars? Footers? Flash Animations?</p>
     <div id="white_house" class="ext_image"><a href="http://www.whitehouse.gov"  target="_blank"><div class="view_site"></div></a></div>

     <div id="abc" class="ext_image"><a href="http://www.abc.com" target="_blank"><div    class="view_site"></div></a></div>

     <div id="quartz" class="ext_image"><a href="http://www.qz.com" target="_blank"><div class="view_site"></div></a></div>

     <div id="usatoday" class="ext_image"><a href="http://www.usatoday.com" target="_blank"><div class="view_site"></div></a></div>

   </div>
</div>

CSS

.content2 {
padding:20px;
background-color:#e0e0e0;
min-height:500px;
height:auto;
width:100%;
}

Answer 1

问题是你需要清除＆＃39; #extensive_look内的浮动元素。

要做到这一点，你可以使用：

#extensive_look { 
  overflow: hidden
}

或者您可以使用以下样式创建clearfix类，并将该类添加到extensive_look div。

<div id="extensive_look" class="clearfix">

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

Answer 2

.content2 {
    padding:20px;
    background-color:#e0e0e0;
    min-height:500px;
    height:auto;
    width:100%;
    overflow-y:auto;
}

＆＃34;最小高度＆＃34;我相信是你的罪魁祸首。 div的计算高度正好是540px - 这是最小高度加上顶部和底部的20px填充。添加＆＃34; overflow-y：auto＆＃34;似乎解决了这个问题。

Div与背景颜色不覆盖儿童Div

2 个答案: