CSS实现侧边栏等高布局

CSS实现侧边栏等高布局

用纯CSS来实现侧边栏等高布局：

html:

<div id="content">
    <div class="left">左边，无高度属性，自适应于最高一栏的高度</div>
    <div class="right">右边，无高度属性，自适应于最高一栏的高度</div>
    <div class="center">中间，高度600像素，左右两栏的高度与之自适应</div>
</div>

css:

#content{
    overflow:hidden;
}
.left{
    width:200px; 
    margin-bottom:-3000px; 
    padding-bottom:3000px; 
    background:#cad5eb; float:left;
}
.right{
    width:400px; 
    margin-bottom:-3000px; 
    padding-bottom:3000px; 
    background:#f0f3f9; float:right;
}
.center{
    margin:0 410px 0 210px; 
    background:#ffe6b8; 
    height:600px;
}

最终起作用的就是父元素的 overflow:hidden，子元素的 margin-bottom:-3000px;padding-bottom:3000px ；3000这个数值是根据可能存在的最大高度来算的。

THE END！