【CSS】等高布局

时间：2023-03-09 01:13:12
【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:; top:;

}




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




    

  1. 高度999em的绝对定位层位于侧栏容器内，侧栏position为relative

    2. 

  2. 该栏实际元素内容用一个与absolute绝对定位层为兄弟关系的标签层包裹，position为relative，z-index值1或其他
    3. 

  3. 左右栏的父标签需设置overflow:hidden，同时为了兼容IE6/7，需设置position为relative

    4. 






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