轉載：https://blog.csdn.net/weixin_34008805/article/details/86111307
兩列等高佈局方案
等高佈局有幾種不同的方法，但目前爲止我認爲瀏覽器兼容最好最簡便的應該是padding補償法。首先把列的padding-bottom設爲一個足夠大的值，再把列的margin-bottom設一個與前面的padding-bottom的正值相抵消的負值，父容器設置超出隱藏，這樣子父容器的高度就還是它裏面的列沒有設定padding-bottom時的高度，當它裏面的任一列高度增加了，則父容器的高度被撐到它裏面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因爲背景是可以用在padding佔用的空間裏的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個障眼法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自適應佈局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:1px solid #00C;
overflow:hidden; /*這個超出隱藏的聲明在IE6裏不寫也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right<br><br><br>現在我的高度比left高，但left用它的padding-bottom補償了這部分高度</div>
<div style="clear:both"></div>
</div>
</body>
</html>