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;
}

这是小提琴：http: //jsfiddle.net/EM77F/2/

Answer 2

问题是您float: left在#post-section.

解决方案 1：

放下浮子：左。但你可能需要它（否则它不会在那里）。

解决方案 2：

添加overflow: auto到#main-content，这样浏览器就会知道有浮动项目需要考虑。盒子会扩大。请注意，您需要将宽度调整为最小宽度或接受水平滚动条

解决方案 3

在 br 之后添加一个清除 br #post-section：

<div id="wrapper">
    <section id="main-body">
        <section id="post-section">
        </section>
    <br style="clear: both;" />
    </section>
</div>