Question

Click here for visual

从图片中可以看出，我的父容器没有扩展以适合我的子容器。页面容器（#contain）实际上停在厨房照片的左下角。子容器（＃zone2）显然溢出其父容器（#contain）。我希望能够（#contain）自动扩展以适应（#zone2）。 CSS是：

#contain {
    position: relative;
    width: 100%;
    margin: 0 px;
    background: #E3DCCC;
    z-index: 0;
}

#zone1 {
    width: 100%;
    height: 850px;
    background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center   top;
    position: absolute;
    z-index: -1;
}
#head {
    position: absolute;
    top: 20px;
    width: 100%;
    height: 330px;
}

#head img {
    max-width: auto;
    height: auto;
}

#zone2 {
    position: relative;
    overflow: hidden;
    padding: 3px;
    top: 360px;
    float: right;
    right: 15px;
    width: 53%;
    height: auto;
    border: 4px solid #715E40;
    background-color: white;
}
#zone2 img {
      max-width:100%;
      height: auto;
      float:left;
      margin: 5px;
}

#zone3 {
    position: relative;
    top: 710px;
    left: 15px;
    float: left;
    height: 340px;
    width: 38%;
    border: 4px solid #715E40;
    background-color: white;
}

Answer 1

这是一个浮动问题。尝试将传统的CSS clear fix添加到＃zone2的容器中：

.container:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

请务必将其放在：after伪选择器中，否则它将不适合您。浮动元素存在于正常文档流之外，这就是容器不扩展以包含它们的原因。清除修复会强制清除浮动，这将导致容器围绕此元素的底部扩展。

Answer 2

我测试了向#zone2添加更多图片，#contain垂直展开。不知何故，你在#zone2中有一个元素，其填充或边距没有被添加到父级的总高度。

如果您想要快速修复以继续，请将margin-bottom: 30px;添加到#zone2。

Answer 3

我已经复制了您的问题，并且能够解决此问题：您可能想尝试一下。它看起来有点奇怪，所以如果你愿意，可以为它做一个课程。我更关心它的位置。

在代码的下方，添加我的第三行。就这样，你就完成了。请注意，它更多的是关于定位。

<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />

只需添加第三行即可。

只需修改其中一个样式：

#zoneclear {   
    clear: both;
    float:none;
    display:block;  
    height: 30px;
    position: relative;
}

[编辑] 这些代码在firefox中有一个严重的错误，谷歌Chrome中没有这个错误（我之前因为你的相对定位而测试过。所以我修改了#zoneclear样式来修复它。你可能要测试其他浏览器是否喜欢这个黑客。

我希望它可以帮到你

容器没有为子div调整大小

3 个答案: