等高布局的使用場景有很多，很多時候為了滿足某列的背景或者邊框跟外框高度一樣，並且不受其他列動態變化高度的影響。一般我會考慮幾種方式:
一、負margin實現
| 代碼如下 | 復制代碼 |
| .row-wrap { <div class="row-wrap"> |
|
這也是負margin的一個應用。這種方法是有一個缺點，就是當其中有出現錨點的時候，會出現錨點跳轉錯位的問題。
二、display:table-cell實現
| 代碼如下 | 復制代碼 |
| .demo { <div class="demo"> |
|
三、使用table布局
使用table是最簡單而且兼容性最好的。不過如果是主要區域的布局，你可能不會喜歡使用table去做。這就要看個人的取舍和項目的實際需求了。
四、使用javascript動態控制高度
這個也沒什么好說的，先獲取最外層的高度，然后動態控制里面每列的高度。
五、使用背景偽裝等高
這是一種常用的方法，也是一般人最先想到的。使用背景圖片通過repeat-y來平鋪最外層的背景，達到偽裝等高的效果。
給容器div使用單獨的背景色（固定布局）
這種方法實現有點復雜，如果你理解其實現過程也是相當的簡單。這種方法我們主要給每一列的背景設在單獨的<div>元素上。這種方法的實現的原則是：任何<div>元素的最大高度來撐大其他的<div>容器高度。如下圖所示：
上圖中，不管我們哪一列的高度最高，那么其三個容器“rightBack,contentBack,leftBack”的高度相應會隨最高列的高列變化，下面我們一起來看其實現過程：
Html Markup
| 代碼如下 | 復制代碼 |
| <div class="container"> <style type="text/css"> .contentWrap { .leftWrap{ |
|
看起來蠻復雜吧？其實你只要了解了它是如何的工作原理就會變得非常簡單，你只要理解並掌握以下幾點：
1.“div.rightWrap”、“div.contentWrap”、“div.leftWrap”都是一個封閉的容器；而“div#left”、“div#content”、“div#right”就是我們所說的列，里面放了內容；
2.每一個容器對應一列的背景色（用來放置背景色或背景圖片）；此例對應的是：“div.rgithWrap”用來實現“div#right”列的背景色；“div.contentWrap”用來實現“div#content”列的背景色；“div.leftWrap”用來實現“div#left”列的背景色；
3.除了最外面的容器（也就是對應的最左列容器）外，我都都對他們進行相對定位，並且設置其“right”值，此值並和相對應的列寬相等。此例中“div.contentWrap”對應的剛好是“div#right”的寬度；而“div.leftWrap”對應用的剛好是“div#content”的寬度；
4.給每列進行左浮動，並設置其列寬
5.給每一列設置相對定位，並進行“left”設置，而且“left”的值等於除第一列的所有列寬的和。此例中“left”的值等於“div#right”和“div#content”兩列的寬度之和，也就是320px+420=740px
用兩幅圖來展示其實現的過程：
下圖是實現上面的第二步對應的示例圖，也就是容器“div.rightWrap”，“div.contentWrap”，“div.leftWrap”進行相對定位（position: releative）,並展示了如何設置對應的“right”值。
上圖虛線代表的范圍是可視范圍，其中有兩列背景將會溢出，解決這個只需要在最外層容器“div.rightWrap”加上“overflow:hidden”就可以進行隱藏溢出的其他背景色。接下來下圖所展示的是上面所說的第五步：
前面我們對三個內容元素都進行了相對定位，現在只需要按第五步將其定位回去，如上圖所示。其實說到最后，你只要理解了這兩幅，你就什么都清楚了。
優點：
這種方法是不需要借助其他東西（javascript,背景圖等）,而是純CSS和HTML實現的等高列布局，並且能兼容所有瀏覽器（包括IE6），並且可以很容易創建任意列數。
缺點：
這種方法不像其他方法一樣簡單明了，給你理解會帶來一定難度，但是只要你理解清楚了，將能幫你創建任意列數的等高布局效果。