首先給大家看一個(gè)圖： 
以前我們?cè)诓季诌@種需要多列多模塊，多列等高，一般會(huì)選擇橫著切一張背景圖來進(jìn)行模擬，這個(gè)也是沒有辦法的辦法。
我們知道單純的兩列等高我們可以利用正內(nèi)邊距加負(fù)外邊距來實(shí)現(xiàn)。padding-bottom:32767px; margin-bottom:-32767px;
這個(gè)方法的原理是事先通過正內(nèi)邊距來使其擁有足夠高的布局控件，然后通過負(fù)外邊距來使得其的位置不變。通過給父元素溢出隱藏，我們可以隱藏掉事先占據(jù)的足夠高的空間。由兩列實(shí)際的內(nèi)容高度來決定整個(gè)父元素的高度，從而實(shí)現(xiàn)了等高。
習(xí)慣思維上，我們都是多列等高，然后把這幾列都浮動(dòng)?，F(xiàn)在我們變換一下思路，直接使用不浮動(dòng)的一列的時(shí)候，情況會(huì)怎樣，我們發(fā)現(xiàn)，當(dāng)一列不浮動(dòng)搭配正內(nèi)邊距加負(fù)外邊距，父元素溢出隱藏，它的高度跟還是由內(nèi)在元素來決定，但是通過web developer toolbar我們可以看到它實(shí)際上已經(jīng)占據(jù)了足夠的高度空間。
同樣的道理，定位也遵循這個(gè)規(guī)則。我們可以把兩側(cè)邊框使用絕對(duì)定位來固定到兩側(cè)，因?yàn)榻^對(duì)定位是不占布局空間的，那么我們需要一個(gè)文檔流來對(duì)父元素進(jìn)行占位?；旧细冈赜卸喔撸惋@示絕對(duì)定位的元素多少內(nèi)容，實(shí)際上這也就實(shí)現(xiàn)了一個(gè)等高。
知道了這個(gè)表現(xiàn)原理，那么我們上文的布局也就不難了，只需要把每列最后一個(gè)模塊再進(jìn)行正內(nèi)邊距加負(fù)外邊距來進(jìn)行空間占位就可以實(shí)現(xiàn)了！至于下邊框，實(shí)際上另外一個(gè)容器從底下進(jìn)行拼裝實(shí)現(xiàn)的~！
下面放上全部代碼：
[ctrl+a 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
上述代碼在ie6,ie7,firefox里皆能正常顯示，但是在ie8 beta1里面，似乎必須配合浮動(dòng)，正內(nèi)邊距跟負(fù)外邊距的多余空間才能被隱藏，希望正式版的ie8會(huì)修復(fù)這一點(diǎn)。如果想在ie8 beta1里面正常顯示，請(qǐng)大家把最后一個(gè)模塊也進(jìn)行浮動(dòng)即可~！在此就不做演示了！
新聞熱點(diǎn)
疑難解答
圖片精選
