典型网页结构：两列结构，左列用来导航，右列用来显示内容，左右两列的高度都不固定。
需求：两列的高度保持一致，避免出现“断层”的效果。
padding补偿法：
实现CSS等高布局的方法有几种，其中浏览器兼容最好的方法是padding补偿法。
(1)把列的padding-bottom设为一个足够大的值。
(2)把列的margin-bottom设为一个与padding-bottom的正值相抵消的负值。
(3)父容器设置溢出隐藏。
原理：当任一列高度增加了，则父容器的高度被撑到最高那列的高度，其他比其矮的列则会用它们的padding-bottom来补偿这部分高度差。
注：padding-bottom的值取决于实际情况，若不确定，可以设大些。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#container{
width:800px;
border:5px solid grey;
overflow:hidden;
}
#left{
width:50%;
float:left;
background:blue;
padding-bottom:2000px;
margin-bottom:-2000px;
}
#right{
width:50%;
float:left;
background:red;
padding-bottom:2000px;
margin-bottom:-2000px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right<br><br>right</div>
</div>
</body>
</html>