2列CSS浮動佈局

Question

用這個簡單的CSS佈局拉出我的頭髮。我有一個2列固定的佈局，頭部和頁腳都包含在一個包裝中。我需要CSS中的「左」背景區域在「右」列中的內容更長時自動擴展到頁腳（如附圖所示，我嘗試過「height：100％;」，但這不起作用。

誰能幫助？

http://eyes-open.com/index.html

Answer 1

是的這個問題很煩人。

另一種解決方案是有div容器，你希望你的資產淨值爲彩色，然後進行內容是另一種顏色：

<style> 
#page { background-color:blue; width: 996px; etc } 
#contents { background-color:red; etc } 
</style> 
<div id="page"> 
    <div id="sidebar"> 
    </div> 
    <div id="contents"> 
    </div> 
</div> 

最終看起來像：

_____________________ 
| |     | 
| |     | 
| |     | 
| |     | 
|___|     | 
|___|_________________| 

與divs，但背景「頁面」的顏色將在左側，內容的背景將在右側

我希望有所幫助。這患有權當是比左:(

編輯小：

你也可以使用BG圖片，如果你因此在這種格式希望這是一件很尷尬的HTML做/ CSS而你只需要玩，直到你得到它適合你的解決方案這花了我幾天來研究我的網站:(

Answer 2

http://www.alistapart.com/articles/fauxcolumns/

做一個假背景圖片和重複垂直向下兩者的容器上。確保容器清除浮動。

Answer 3

這個網站：

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

擁有各類的一些很好的例子這樣的佈局，t帽子做得非常好，（相對）乾淨。他們是我過去使用過的，他們工作得很好。他們有點複雜，但他們工作，這是CSS中的一個臭名昭着的問題，不容易解決。上述解決方案是我找到的最好，最乾淨，最可靠的解決方案。