具有动态高度的 CSS 和 DIV

Question

我有这样一个网页结构:

<div class="total">
    <div class="menu">
    </div>
    <div class="content">
    </div>
</div>

因此“菜单”div 包含我的左侧菜单，而“内容”div 包含一些动态文本。实际上，我所做的结构都以正确的方式定位在我的“总”div 中。实际上，我在我的 CSS 上编辑了我的“总计”div，如下所示:

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
}

问题是我无法获得我真正想要的东西:边框都在顶部(就像水平行)并且没有出现具有不同背景颜色的我的 div。

如何使“总”div 的高度动态变化？

编辑:链接到jsFiddle

Answer 1

.total 元素已经完全折叠，因为它的所有子元素都是 float 的。您需要做的就是添加一个 clearfix。

http://jsfiddle.net/CJZCt/3/

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
    overflow: hidden;
}

清除 float 的其他方法可以在这里找到:https://stackoverflow.com/a/1633170/1652962