Question

我有一个非常基本的网站，左侧导航栏和右侧更大的内容区域。他们每个人都有不同的背景。

我希望内容和导航栏的高度相同并保持其背景。我不知道该怎么做，所以我把它们都放在一个div中并将其背景设置为导航栏的背景。当内容扩展时，它会推送包含div并在左侧显示正确的背景：

当导航大于内容时，背景错误：

完成我想要做的事情的正确方法是什么？另外，在旁注中，为什么包含div的高度为0px，即使其内部的div具有高度，除非我将包含div设置为向左浮动？

编辑：

澄清一下，我想：

Answer 1

啊，你已经发现CSS中等高柱几乎不可能。有一些hackish解决方案，但最简单？ Faux columns

只需制作1000px宽，1px高的图像，然后在背景div上垂直重复。将第一个100px蓝色和下一个900px绿色。没有人会知道差异！

#background { background: url(file.png) repeat-y; }

More techniques（这通常比它们的价值更麻烦）。

回答第二个问题：浮动元素不会向父级添加高度（默认情况下）。要解决此问题，只需在包装器overflow: hidden（example）上设置overflow: auto或div：

#wrapper { background:black; overflow:hidden; }