带背景颜色的 Div 不覆盖子 Div答案

【问题标题】：Div With Background Color Not Covering Child Div带背景颜色的 Div 不覆盖子 Div
【发布时间】：2020-05-01 01:45:44
【问题描述】：

我有两个 div：

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

后者是我的内容的容器，因此具有固定宽度，居中（margin:0 auto），但没有背景颜色。这个想法是 content 将内容组织到一定的宽度，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%;
}

【问题讨论】：

将overflow: hidden添加到#extensive_look

标签： html css height

【解决方案1】：

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

为此，您可以使用：

#extensive_look { 
  overflow: hidden
}

或者您可以创建一个具有以下样式的 clearfix 类并将该类添加到extent_look div。

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

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

.clearfix:after {
  clear: both;
}

【讨论】：

我在广泛查看网站部分时遇到了同样的问题（不要与适用于优秀示例部分的扩展外观 div 混淆）。我尝试将 overflow:hidden 添加到控制该部分宽度的 div 中，但它不起作用。但是，它确实适用于本节。如何修复其他部分？
这是由 top: 20px 在 .content 上引起的（内联样式）。如果您想将其从顶部移动，请使用margin-top。

【解决方案2】：

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

“最小高度”是你的罪魁祸首，我相信。 div 的计算高度正好是 540 像素——这是最小高度加上顶部和底部的 20 像素填充。添加“overflow-y:auto”似乎可以解决问题。

【讨论】：