Question

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

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

所以＆＃34;菜单＆＃34; div包含我的左侧菜单，以及内容＆＃34; div包含一些动态文本。实际上，我所建造的结构都以正确的方式定位，在我的＆＃34;总计＆＃34; DIV。我实际上编辑了我的＆＃34;总计＆＃34;像我这样的CSS：

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

问题在于我无法获得我真正想要的东西：边框全部位于顶部（它就像一条水平行），并且我的div没有出现不同的背景颜色。< / p>

如何制作＆＃34;总计＆＃34; 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

Answer 2

您可以使用clearfix修复此问题：http://nicolasgallagher.com/micro-clearfix-hack/

将此添加到您的css，并将cf类添加到您的div.content

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

测试：http://jsfiddle.net/CJZCt/4/

具有动态高度的CSS和DIV

2 个答案: