jquery - 如何使用最小高度调整分区内的分区？

Question

我创建了以下 html 代码:

<div id="wrapper">
    <section id="main-body">
       <section id="post-section">
       </section>
     </section>
</div>

CSS

#wrapper
{
margin:0 auto;
width:1000px;
min-height:600px;

}
#main-body
{
width:100%;
min-height:1000px;
border:1px solid black;
border-radius:10px;
}
 #post-section
{
float:left;
width:800px;
min-height:1100px;
border-right:1px solid gray;
background:plum;
}

问题是由于包装器的“主体”尺寸的最小高度在增加，但由于“包装器”和“主体”的“后节”尺寸没有增加。

Answer 1

你需要一个'clearfix'。添加此 CSS 规则:

main-body:after {
    content: ".";
    height: 0;
    display: block;
    clear: left;
}

这是 fiddle :http://jsfiddle.net/EM77F/2/