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

在#post-section之后添加清算br：

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

如何用最小高度调整内部划分？

2 个答案: