内部子项浮动时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％高度。我的猜测是浏览器在浮动元素之前计算窗口高度。

是否可以仅使用CSS解决此问题？ （我可以用JS做，但它看起来太脏了）

Answer 1

删除height属性

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

DEMO http://jsfiddle.net/56C9v/7/

如果您希望容器始终占据100％，则设置min-height：100％例如

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

Answer 2

如果我理解正确，您不希望容器/内容超出屏幕高度的100％。

您可以通过在overflow:hidden;样式表中添加container来完成此操作。

有关overflow属性的更多信息，请参阅： https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 3

摆脱高度并将overflow:auto放在容器上。

jsFiddle example （大）

jsFiddle example （小）

Answer 4

如果我理解正确，您希望容器始终为文档高度的100％，浮动也要向下拉伸，但不会增加容器的高度。

身体上的边距使其超过100％的高度，所以要消除......

html, body {
  height: 100%;
  margin: 0;
}

您的容器的填充高度超过100％，因此我们使用新的border-box ...

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

然后将浮动设置为100％高度，并使用滚动条处理文本溢出...

.sidebar, .content {
  height: 100%;
  overflow: auto;
}

我认为这是你想要实现的目标？ http://jsfiddle.net/56C9v/10/