具有动态高度的CSS和DIV

Question

我有一个像这样的网页结构:

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

所以"menu"div包含我的左侧菜单,而"content"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元素已完全折叠,因为它的所有子元素都已浮动.您需要做的就是添加一个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;
}

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