什麼是等高布局?
先來看乙個案例：
上圖中的頁面的主體內容是兩列結構，左列是用來導航的，右列是用來顯示內容的。我們看到它們有乙個共同的邊框，中間還有一條分隔線，左右兩列的高度都是不固定的。這種情況下就需要兩列的高度保持一致了，左邊高度增加，右邊也跟著增加，右邊高度增加，左邊同樣也要增加，否則就會出現「斷層」的效果。在這裡，等高布局是為了維護邊框線條的完整性，在有些地方則可能是為了維護背景的完整性，達到整體一致不缺失的效果。
布局方案
等高布局有幾種不同的方法，但目前為止我認為瀏覽器相容最好最簡便的應該是padding補償法。首先把列的padding-bottom設為乙個足夠大的值，再把列的margin-bottom設乙個與前面的padding-bottom的正值相抵消的負值，父容器設定超出隱藏，這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度，當它裡面的任一列高度增加了，則父容器的高度被撐到它裡面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因為背景是可以用在padding占用的空間裡的，而且邊框也是跟隨padding變化的，所以就成功的完成了乙個障眼法。
**
先來看下沒有等高布局的情況
效果：
然後我們應用等高布局：
效果如下：
在進行具體操作的時候，padding-bottom的值大小取決於你的專案的實際情況，如果不確定，設大一點也無所謂。
最終的**：
我是left
我是right
現在我的高度比left高，但left用它的padding-bottom補償了這部分高度
CSS小技巧之多列等高布局
網頁開發中經常會遇到下面這樣的情景，每個模組的高度不一樣，又是不定高，用js動態獲取又顯得沒必要，總結了以下兩個小技巧 html some code some code some code css left,right center box box div 出現這種情況的原因也很簡單，就是各個 di...
css技巧之多列等高
這裡的多列等高，是指列高由內容決定，所以是不確定的 利用padding bottom margin bottom正負值相抵 html container left 我是left right 我是right 現在我的高度比left高，但left用它的padding bottom補償了這部分高度 cle...
CSS布局奇淫技巧之
居中是我們使用css來布局時常遇到的情況。使用css來進行居中時，有時乙個屬性就能搞定，有時則需要一定的技巧才能相容到所有瀏覽器，本文就居中的一些常用方法www.cppcns.com做個簡單的介紹程式設計客棧。注 本文所講方法除了特別說明外，都是相容ie6 谷歌 火狐等主流瀏覽器的。先來說幾種簡單的...