CSS布局自適應高度解決方法

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

先看**：

#wrap

#sideleft, #sideright

實現原理：

塊元素必須包含在乙個容器裡。

應用overflow: hidden 到容器裡的元素。

應用 padding-bottom（足夠大的值）到列的塊元素 。

應用margin-bottom（足夠大的值）到列的塊元素。

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

相容各瀏覽器

ie mac 5

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

/*/*/

#sideleft, #sideright

/**/

opera

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

/* easy clearing */

#wrap:after

#wrap

/*/*/

#wrap

/* end easy clearing */

/*/*/

2. opera8處理overflow: hidden有個bug,還得加上以下**：

/*/*/

#sideleft, #sideright

@media all and (min-width: 0px)

#sideleft:before, #sideright:before

}/**/

3.opera9的b2在修正8的bug.

測試環境：ie5.01、ie5.5、ie6.0、firefox1.5、opera8.5、netscape 7.2通過。

最終效果:

執行**框

CSS布局自適應高度解決方法

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

CSS布局自適應高度解決方法

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

Div CSS高度自適應解決方法

轉 這幾天用div css寫 樣子 上中下，中間是個左中右3列，可這3列不是等高偏巧有不同顏色的背景，結果就是ie firefox.這些瀏覽器無一例外的現實的效果都是長短不齊，如何讓這3列可以自適應高度？除錯了半天，搜尋了一番，終於找到解決辦法了，採用 div css 進行三列或二列布局時，事先不知...