如何用最小高度调整师内部的分工？

我已经创建以下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; 
}

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

来源

2013-10-07 Vivek Kumar

你要什么做的？你没有提到你想要做什么？ –

你的“包装”有min-height：600px，“post-section”有1100px。看起来不合适。 –

我想增加包装和主体大小，当我增加后节的大小，但不知何故它没有发生。 –

您需要'clearfix'。添加此CSS规则：

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

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

来源

2013-10-07 12:52:02 fred02138

感谢它的工作，但我没有正确理解基本内容：“。”; ，它是为了什么？ –

@VivekKumar下面是clearfix的一个很好的解释：http://www.webtoolkit.info/css-clearfix.html – fred02138

@VivekKumar其实这是一个更好的网站：http://www.jqui.net/tips-tricks/ css-clearfix /这个想法是，你需要一个不带浮动的不可见块元素来使包含元素识别高度。 – fred02138

的问题是，你在你的#post-section使用float: left。

解决方案1：

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

解决方案2：

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

解决方案3

添加结算BR #post-section后：

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

来源

2013-10-07 12:54:14 LinkinTED

如何用最小高度调整师内部的分工？

回答

相关问题