背景色不覆盖子Div的Div

Question

我有两个div：

• [content2，它具有我的背景色，并且具有height:auto和width:100%
• 和content2中的另一个div称为extensive_look

后者是我的内容的容器，因此具有固定的宽度，居中（带有margin:0 auto），但没有背景色。想法是，内容将内容结构化为一定宽度，content2给出了跨越整个页面宽度的背景色。

问题是content2似乎没有用其背景色覆盖所有内容。

我首先认为可能是因为extensive_look具有position: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...</p>
      <div id="white_house" class="ext_image">
        <a href="http://www.example.com" target="_blank">
          <div class="view_site"></div>
        </a>
      </div>

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

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

      <div id="usatoday" class="ext_image">
        <a href="http://www.example.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

问题是您需要'清除'#extensive_look中的浮动元素。

Answer 2

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