当内部 child 有 float 时 CSS 高度 100%

Question

我有一个基本结构

<div class="container">
    <div class="sidebar">
    </div>
    <div class="content">
    </div>
    <div style="clear:both;"></div>
</div>

其中 .sidebar 和 .content 有 float: left

我在 S.O. 上看到了太多答案。并且只有当 .content 不大于屏幕本身时它们才有效。为了说明我的问题，我有这两个例子

http://jsfiddle.net/pleasedontbelong/h35vc/2/ (小内容) http://jsfiddle.net/pleasedontbelong/56C9v/1/ (大内容)

如您所见，当 .content div 太大时，容器上的 height:100% 不再起作用。

在这两种情况下，灰色 div 的高度都应为 100%。我的猜测是浏览器在 float 元素之前计算了窗口高度。

是否可以只使用 CSS 来解决这个问题？ (我可以用 JS 来做，但它看起来太脏了)

Answer 1

移除height属性

.container{
    background-color: #999;
    padding: 20px;
    //no height declared
}

演示 http://jsfiddle.net/56C9v/7/

如果你想让容器总是占据100%那么设置min-height: 100% eg

.container{
        background-color: #999;
        padding: 20px;
        min-height: 100%;
    }