上图中的页面的主体内容是两列結构左列是用来导航的，右列是用来显示内容的我们看到它们有一个共同的边框，中间还有一条分隔线左右两列的高度都是不固定嘚。这种情况下就需要两列的高度保持一致了左边高度增加，右边也跟着增加右边高度增加，左边同样也要增加否则就会出现“断層”的效果。在这里等高布局是为了维护边框线条的完整性，在有些地方则可能是为了维护背景的完整性达到整体一致不缺失的效果。

等高布局有几种不同的方法但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值再把列的margin-bottom设┅个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的所以就成功的完成了一个障眼法。

先来看下没有等高布局的情况

然后我们应用等高布局：

在進行具体操作的时候padding-bottom的值大小取决于你的项目的实际情况，如果不确定设大一点也无所谓。