DIV高度自适应方法汇总-----摘自网友

 

你对DIV高度自适应的方法是否了解，这里和大家分享一下，网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度相同，有以下几种方法。

DIV高度自适应方法汇总

网站优化（seo）中，提到过网站样式的优化，即在网站的布局设计中，采用DIV+CSS来布局。网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同，有以下几种方法解决DIV高度自适应问题：

1、JS实现（判断2个div高）；

2、纯CSS方法；

3、加背景图片实现。

◆DIV+CSS基本布局：

1. <dividdivid="mm"> 
2. <dividdivid="mm1"></div> 
3. <dividdivid="mm2"></div> 
4. </div> 

1、js实现div高度自适应

代码如下：

1. <scripttypescripttype="text/javascript"> 
2. <!--  
3. windowwindow.onload=window.onresize=function(){  
4. if(document.getElementById("mm2").clientHeight<document.
5. getElementById("mm1").clientHeight){  
6. document.getElementById("mm2").style.height=document.
7. getElementById("mm1").offsetHeight+"px";  
8. }  
9. else{  
10. document.getElementById("mm1").style.height=document.
11. getElementById("mm2").offsetHeight+"px";  
12. }  
13.  
14. }  
15. --> 
16. </script> 
17.  

（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；上面的代码在IE6.0/IE7.0下通过，并没有在opera和firefoxs下测试。）

2、纯CSS方法实现DIV高度自适应

CSS里代码（IE下测试通过，但不会显示div下边框，即border-bottom）：

1. /*左右自适应相同高度start*/  
2. #m1,#m2  
3. {  
4. padding-bottom:32767px!important;  
5. margin-bottom:-32767px!important;  
6. }  
7. @mediaalland(min-width:0px){  
8. #m1,#m2  
9. {  
10. padding-bottom:0!important;  
11. margin-bottom:0!important;  
12. }  
13. #m1:before,#m2:before  
14. {  
15. content:'[DONOTLEAVEITISNOTREAL]';  
16. display:block;  
17. background:inherit;  
18. padding-top:32767px!important;  
19. margin-bottom:-32767px!important;  
20. height:0;  
21. }  
22. }  
23. /*左右自适应相同高度end*/  
24.  

3、加背景图片实现DIV高度自适应

这个方法，很多大网站在使用，如163，sina等。

XHTML代码：

1. <dividdivid="wrap"> 
2. <dividdivid="column1">这是第一列</div> 
3. <dividdivid="column1">这是第二列</div> 
4. <divclassdivclass="clear"></div> 
5. </div> 
6.  

CSS代码:

1. #wrap{width:776px;background:url(bg.gif)repeat-y300px;}  
2. #column1{float:left;width:300px;}  
3. #column2{float:right;width:476px;}  
4. .clear{clear:both;}  
5.  

还有其他的一些方法源码天空，但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码，请给我们留言，欢迎与我们讨论。

转载于:https://www.cnblogs.com/xiaoleidiv/archive/2013/05/31/3109943.html