【CSS】等高布局

1. 负margin：

 

margin-bottom:-3000px; padding-bottom:3000px;

再配合父标签的overflow:hidden属性即可实现高度自动相等的效果。

 

2. display: table-cell

 

display:table-cell; 
*display:inline-block; *width:auto;
width:2000px; 

或者使用：

display:table-cell; 
width:2000px; 
*width:auto; *zoom:1;

3. 绝对定位

实现等高效果的核心CSS代码如下：

.equal_height{
　　width:100%; height:999em; 
　　position:absolute; left:0; top:0;
}

同时，满足以下一些条件：

1. 高度999em的绝对定位层位于侧栏容器内，侧栏position为relative
2. 该栏实际元素内容用一个与absolute绝对定位层为兄弟关系的标签层包裹，position为relative，z-index值1或其他
3. 左右栏的父标签需设置overflow:hidden，同时为了兼容IE6/7，需设置position为relative

 

原理很简单：由于绝对定位元素无高度的特性无宽度的特性，我们可以伪造一个高度足够高的绝对定位层（设置背景色，边框等属性），同时设置父标签溢出隐藏，那么其多出来的高度酒不会显示了，也就实现了看上去的等高布局效果了。