调整大小的HTML背景问题

Question

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

我希望内容和导航栏的高度相同并保持其背景。我不知道如何做到这一点，所以我把它们都放在一个div中，并将其背景设置为导航栏的背景。当内容的扩展，它推动了包含分区，并显示在左边的正确背景：

http://jsfiddle.net/8Ngey/3/embedded/result/

当导航比含量大，但是，背景是错误的：

http://jsfiddle.net/8Ngey/2/embedded/result/

什么是正确的方式来完成我想要做的？另外，在一个侧面说明，为什么包含div的高度为0px，即使div内部有高度，除非我将包含的div设置为向左浮动？

编辑：

为了澄清，我想：

• 页只要内容
• 导航条，只要页面
• 内容，只要页面
• 内容和导航保持背景颜色

Answer 1

啊，你已经发现了CSS中几乎不可能的等高列。那里有一些骇人的解决方案，但最简单的？ Faux columns。

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

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

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

---

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

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