css实现多列高度自适应的方法

来源：互联网发布：mac win10 共享文件夹编辑：程序博客网时间：2024/06/04 23:27

你对CSS布局自适应高度解决方法是否了解，这里和大家分享一下，本文要介绍的方法是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

查看DEMO

CSS布局自适应高度解决方法

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码：

#wrap{  
overflow:hidden;  
}  
 
#sideleft,#sideright{  
padding-bottom:32767px;  
margin-bottom:-32767px;  
}

实现原理：

块元素必须包含在一个容器里。

应用overflow:hidden到容器里的元素。

应用padding-bottom（足够大的值）到列的块元素。

应用margin-bottom（足够大的值）到列的块元素。

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

兼容各浏览器

IEMac5

得到高度正确，所以要过滤掉上面的代码。

/*\*/  
#sideleft,#sideright{  
padding-bottom:32767px;  
margin-bottom:-32767px;  
}  
/**/

Opera

1.Opera7.0-7.2不能正确清除溢出部分，所以要加：

/*easyclearing*/  
#wrap:after  
{  
content:'[DONOTLEAVEITISNOTREAL]';  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
#wrap  
{  
display:inline-block;  
}  
/*\*/  
#wrap  
{  
display:block;  
}  
/*endeasyclearing*/  
/*\*/

2.Opera8处理overflow:hidden有个BUG,还得加上以下代码：

/*\*/  
#sideleft,#sideright  
{  
padding-bottom:32767px!important;  
margin-bottom:-32767px!important;  
}  
@mediaalland(min-width:0px){  
#sideleft,#sideright  
{  
padding-bottom:0!important;  
margin-bottom:0!important;  
}  
#sideleft:before,#sideright:before  
{  
content:'[DONOTLEAVEITISNOTREAL]';  
display:block;  
background:inherit;  
padding-top:32767px!important;  
margin-bottom:-32767px!important;  
height:0;  
}  
}  
/**/

3.Opera9的B2在修正8的bug.

测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape7.2通过。

0 0