解決列高度自適應的五種方法！_Div+CSS教程

1.背景圖填充
這是使用最廣泛的一種做法，無hacks，推薦使用：


2.采用腳本控制列的高度（一）
需要事先知道哪列的高度，以此為基準用腳本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight "px"
上面的代碼是以sideright的基準高度來控制sideleft的高度。
代碼簡單，但比較被動：


3.采用腳本控制列的高度（二）
不需要事先知道哪列的高度，腳本自動判定。
代碼較復雜，有點延時：


4.采用負的外邊界和內補丁相結合
不需要事先知道哪列的高度。
hacks比較多（主要是opera的），但輕易使用，推薦：


5.采用負的左右邊界和相對定位
下面的例子能較好地解決列高度相同的問題。
三行二列布局，主要內容在左邊，網頁寬度750px,左列580px,右列170px。
CSS代碼：

xhtml代碼：

從結構看，middle（使用的是左列希望的背景色）在最外面，寬度等于sideleft的寬度，往里一層是sideright，其寬度為170px,浮動方向是右邊。但其右面的邊界是負的170px，相當于將sideright拉向右面（右面緊貼著middle的右邊）170px的位置。而sideleft又是套在sideright里面的，其內容先于sideright出來，左邊界是負的580，相當于在sideright左邊580px，此時sideleft和middle位置重合。
優點：不需要背景圖片，無hacks，完全的自適應高度。
缺點：現在的代碼只能左對齊。
演示：

參考資料：http://www.pmob.co.uk/temp/2equalising-columns-separate-good-2.htm