css - 外部 div 的高度不会根据内部 div 和元素而变化

Question

我有一个 div（maincontent），它位于另一个 div（容器）中。这些 div 位于 aspx 页面中，并且我在内部 div（maincontent）中有许多 asp.net 控件。但它是如此有趣，该网站看起来像这样；

http://i.stack.imgur.com/omahx.jpg

白色部分（maincontent）应根据里面的元素调整大小。但它的高度显示为0px。

这里是maincontent和container的css；

#container
{
background: #FFF;
width: 1000px;
height:auto;
margin-right: auto;
margin-left: auto;
border-right: 2px solid #B0AA94;
border-left: 2px solid #B0AA94;
border-bottom: 2px solid #B0AA94;
border-radius: 0px 10px 0px 10px;
}

#maincontent
{
height: auto;
font-family: Trebuchet MS;
font-size: 10px;
color: Black;
margin-left: 30px;
margin-top: 40px;
}

我错过了什么？

Answer 1

这些容器中可能有很多浮动元素。你需要清除它们。您可以通过将容器的溢出属性设置为“自动”或“隐藏”来清除浮动元素。

小提琴：http: //jsfiddle.net/JyAMb/

Answer 2

浮动 div 使其脱离正常的元素流。在浮动 div 之后添加<div style="clear:both">以清除它们。