程式碼：

效果圖：

路人甲：OK?等高了？？

路人丙：不是吧？

路人乙：你這是在逗我？

xiaomogg：

效果有點慘，不過這的確是已經做了等高處理的

為什麼“等高”，看起來卻不等高

請留意程式碼處紅框處

 padding-bottom:99px;
  margin-bottom:-99px;

路人甲：這說明不了什麼問題！！

路人乙：快進入主題吧

路人丙：......................

xiaomogg：

其實“等高” 真的是不等高

1.如果把padding-bottom:99px;  margin-bottom:-99px;的值該大點例如：padding-bottom:999px;

2.事實上，上面個例子如果不增加margin負值和padding的值，及時最外層給了overflow：hidden，效果仍然如上

3.再看看第一步的效果圖

兩邊”“登高”了，及時右側沒有任何東西，不過這只是“障眼法”

①去掉最外層的overflow：hidden；

②或兩列任意一列的填充內容高度大於999就會看到不等高的情況了

③“等高兩列布局”，“登高多列布局”，如果單純用csss做的話，只是取巧或“障眼法”，如果出現上面兩張情況或未知情況的話，“登高”

的弊端就暴露在眼前

④如果可以限制兩列內容高度，可以嘗試使用純css 兩列布局

以上效果經過檢測，支援IE7 谷歌  火狐

============================更新(2018/07/26)=======================

上面的程式碼特別的取巧。如果能夠確定兩列有一列的高度是固定的(兩列布局，左側的選單頁面一般是有最大高度限制)，可以直接用定位以及浮動、min-height就可以解決

程式碼如下:

.userCenter .centermain {
 position: relative;
  width: 1200px;
  min-height: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
 

左側（核心程式碼，讓左側的高度等於被右側撐開的父級高度）：

.userCenter .centermain .left{
  position: absolute;
  left: 0;
  top: 0;
  width: 215px;
  height: 100%;
  min-height: 1200px;

}

右側：

.userCenter .center-content {
  float: right;
  width: 982px;
  min-height: 1200px;
  height: 100%;
}