0

我有一个基本结构

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

在哪里.sidebar和.content有float: left

我在 SO 上看到了太多的答案，而且它们只有.content在不大于屏幕本身的情况下才有效。为了说明我的问题，我有这两个例子

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

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

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

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

4

4 回答 4

2

移除height属性

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

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

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

.container{
        background-color: #999;
        padding: 20px;
        min-height: 100%;
    }
于 2013-05-22T17:23:47.053 回答
0

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

您可以通过将：添加overflow:hidden;到您的container样式表来完成此操作。

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

于 2013-05-22T17:20:20.523 回答
0

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

jsFiddle 示例（大）

jsFiddle 示例（小）

于 2013-05-22T17:20:46.127 回答
0

如果我理解正确，您希望容器始终是文档高度的 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/

于 2013-05-22T17:33:15.337 回答