調整大小的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; }