Equal Height Columns –DIV+CSS布局中自適應高度的解決方案

這是一個比較典型的三行二列布局，每列高度（事先並不能確定哪列的高度）的相同，
是每個設計師追求的目標，按一般的做法，大多採用背景圖填充、加JS指令碼的方法使列的高度相同，
本文要介紹的是採用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來
解決列高度相同的問題。

先看代碼：

#wrap{overflow: hidden;}#sideleft, #sideright{padding-bottom: 32767px;margin-bottom: -32767px; }

實現原理：

1. 塊元素必須包含在一個容器裡。
2. 應用overflow: hidden 到容器裡的元素。
3. 應用 padding-bottom（足夠大的值）到列的塊元素 。
4. 應用margin-bottom（足夠大的值）到列的塊元素。

padding-bottom將列拉長變的一樣高，而負的margin-bottom又使其回到底部開始的位置，
同時，溢出部分隱藏掉了。

相容各瀏覽器

IE Mac 5

得到高度正確，所以要過濾掉上面的代碼。

/*\*/#sideleft, #sideright{padding-bottom: 32767px;margin-bottom: -32767px; }/**/

Opera

1. Opera7.0-7.2不能正確清除溢出部分，所以要加：

/* easy clearing */#wrap:after{content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden;}#wrap{display: inline-block;}/*\*/#wrap{display: block;}/* end easy clearing *//*\*/

2. Opera8處理overflow: hidden有個BUG,還得加上以下代碼：

/*\*/#sideleft, #sideright{padding-bottom: 32767px !important;margin-bottom: -32767px !important; }@media all and (min-width: 0px) {#sideleft, #sideright{padding-bottom: 0 !important;margin-bottom: 0 !important; }#sideleft:before, #sideright:before{content: '[DO NOT LEAVE IT IS NOT REAL]';display: block;background: inherit;padding-top: 32767px !important;margin-bottom: -32767px !important;height: 0;}}/**/

Opera9的B2在修正8的bug.

測試環境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通過。

最終效果

原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight

請注意:網友momomolo測試時發現,當頁面長度到2000px,opera中就出問題了,現在還沒有解決的辦法.