包装div背景不会超过初始浏览器窗口大小

Question

我正在一个网站上工作，尝试获取我设计的基本框架，以便我能够添加内容，并让div增长到内容的长度。我的问题是，似乎一旦页面加载，它只显示初始浏览器窗口大小的div的背景颜色..我没有做好解释;说实话，因为我不确定问题是什么，我只是知道它不能正常工作。

谢谢！

Answer 1

问题是你在#fauxcolumns内部浮动了你没有清除的元素。解决方案是清除它们。

最简单的方法是将溢出：隐藏添加到#fauxcolumns，如下所示：

#fauxcolumns {
    ...
    overflow: hidden;
    ...
}

如果您想查看选项，此问题会显示其他清算方法： What methods of ‘clearfix’ can I use?

你也不需要height:100%所有内容，绝对不能#fauxcolumns，因为它会剪辑低于“折叠”的内容。

Answer 2

在#fauxcolumns中，您声明了height: 100%。任何时候元素都使用百分比值，它相对于它们的容器。因此，在height: 100%上设置#fauxcolumns会导致高度等于浏览器窗口的高度。那是部分为什么你的div会切断它的作用。删除height: 100%是允许高度增长到内容大小的第一步。

这不起作用的另一个原因是因为您在#fauxcolumns内部已经浮动了尚未清除的元素。我没有特别看到你为什么需要它们首先浮动的原因，但如果你这样做，添加overflow: hidden将确保你的floats are cleared和容器包装这些元素。

总结一下，删除此height: 100%声明并添加overflow: hidden。