css实用技巧：巧用css实现两栏等高布局

又到了利用碎片学习的时间了，看看这个小案例，超级实用的一个css技巧:css实现两栏等高布局。

样式方面：

<style>

#box{

width:900px;

font-size:28px;

line-height:300px;

text-align:center;

border:2px solid #000;

margin:10px auto;

background:#999;

overflow: hidden;

}

.left{

width:400px;

height:300px;

float:left;

background:#ccc;

margin-bottom:-1000px;

padding-bottom:1000px;

}

.right{

width:500px;

float:right;

background:#0F3;

margin-bottom:-1000px;

padding-bottom:1000px;

}

</style>

布局方面：

<div id="box">

<div class="left">

左边高度设为 height:500px;

</div>

<div class="right">

右边高度不用设置，自动实现等高

</div>

</div>

这样就可以实现两栏等高布局啦，效果如下

要点1：父容器设置超出隐藏：overflow:hidden;

要点2：子容器设置padding-bottom:1000px;一个足够大的值。然后再设置一个margin-bottom的值和padding-bottom相等的负值 ，相抵消。

这种方法称之为padding补偿法。当其中一列的高度增高时，总的高度就会随之增高。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

前端爱好者们约定，阅读后：

if（‘觉得有用’）

｛

分享给朋友（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享给朋友（‘a piece of cake！’）;

｝

else if('看不懂')

{

回复小编（'help me!'）;

}