Container Div没有扩展到内部div内容

Question

我一直在寻找整晚，而且我必须做错事，因为我之前已经发过这个问题或类似问题。我很抱歉需要再问一次。

我有一个容器div，它包含一些其他div，它们不会随内部div内容扩展。代码可以在这里找到：http://jsfiddle.net/pR7bq/

我无法移除身高：100％;来自#container，因为它也需要容纳更少的内容。我已经看到提到使用

<br style="clear:both" />

但是我要么错误地使用它，要么它不起作用。我在这里找到了相同或类似问题的答案：What methods of ‘clearfix’ can I use?但是，我不知道在哪里放置代码。我最好的尝试都失败了。我也尝试过使用溢出属性，但我不希望滚动条出现在div而不是页面上，如果这有意义的话。

感谢所有人的帮助，并提前感谢你。

Answer 1

将此用于容器样式：

#container{
    width:80%;
    background:#f6f6f6;
    height:auto;
    margin: 0 auto;
}   

通过使用高度自动，浏览器会尝试确定将覆盖其所有子项的元素的高度。

当你使用高度：100％时，它根据元素容器的父高确定高度。

Answer 2

现在习惯min-height而不是身高

就像这样

#container{
height:100%; // remove this line
min-height:100%; // add this line 
}

Live Demo

Answer 3

我通常只是在我的css中抛出这样的课程

.iefix{ clear: both;font-size: 1px;}

然后我把它扔在不在IE中行为的div下的div中

<div class="wrap">
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div class="iefix"></div>
</div>

Answer 4

使用高度自动或不定义高度来解决您的问题