我是在进行一个php页面布局的时候发现当内容区域被撑高,侧边栏没法跟着实现等高,这就很难看,看了张大神博客,发现这个办法,留作纪念,以作复习
这个布局的好处在于不管中间内容怎么撑高,两边侧栏都会跟着等高
<style>
body{margin: 0;padding: 0;}
.wrap{
overflow: hidden;
}
.left{
width: 200px;
background-color: #C5C5C5;
float: left;
margin-bottom: -3000px;
padding-bottom: 3000px;
}
.right{
width: 300px;
background-color: yellow;
float: right;
margin-bottom: -3000px;
padding-bottom: 3000px;
}
.main{
height: 500px;
background-color: lightpink;
margin: 0 310px 0 210px ;
}
</style>
!父标签的overflow:hidden属性是必须的,否则会显示溢出的内容
<div class="wrap">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="main">内容部分</div>
</div>
内容来源:http://www.zhangxinxu.com/study/201003/colums-same-height-demo.html