CSS部分自动调整高度？

我有一个HTML部分“all”，它围绕着另外两个部分。我很难让网站根据我放在其他两个部分的内容的长度来调整“所有”部分的高度

<section id="all">
   <section id="left_content">
      <p>Something here.</p>            
   </section>
   <section id="right_content">
      <p>Something here.</p>
   </section>
</section>

#all {
    width: 900px;
    height: 700px;
    margin: 0 auto;
    padding-top: 20px;
    background: #F4F4F4;
}

#left_content {
    float: left;
    width: 570px;
    margin-top:-20px;
    padding: 0px 20px 10px 20px;
    line-height: 25px;
    font-size: 12px;
}

#right_content {
    border-left:4px solid #cccccc;
    float: right;
    width: 250px;
    padding: 0px 10px 20px 20px;
    line-height: 20px;
    font-size: 12px;
}

• 不要给所有人一个高度
• 清理你的彩车

当子项浮动时，包装器无法确定高度。您需要一个“结束”浮动的元素<代码>是清除浮动的常用方法。这是另一种技术

---

阅读更多内容：

删除所有人的高度声明（如迪奥德乌斯所说）。然后需要在两个content div（如页脚）下面应用clearfix元素，或者对div#all应用clearfix

例如：

/* For modern browsers */
#all:before,
#all:after {
    content:"";
    display:table;
}

#all:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
#all {
    zoom:1;
}

---

这是对的直接复制和粘贴。

将#所有高度设置为自动。和溢出：隐藏；我试过这个，是的，它符合我的要求。我很抱歉没有提到这一点，但左侧内容和右侧内容的高度不同，因此下面的解决方案导致了较大的差距。此解决方案采用两个高度中较大的一个，并正确填充#所有背景。