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指令碼的方法使列的...

css布局之高度自適應

方法一 利用絕對定位 乙個元素是絕對定位時，如果沒有給它設定高度或寬度，則它的的高度和寬度是由它的top right bottom left屬性決定的。13 高度自適應，就是同時設定了top和bottom的值。方法二 利用padding實現 1 給父元素留padding top，然後用相對定位，把b...

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

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