• 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-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{776px;background:url(bg.gif)repeat-y300px;}  
    2. #column1{float:left;300px;}  
    3. #column2{float:right;476px;}  
    4. .clear{clear:both;}  
    5.  

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

  • 相关阅读:
    mac的webdriver自动化
    MongoDB win安装后无法远程连接访问
    Fiddler的一些坑: !SecureClientPipeDirect failed: System.IO.IOException
    Mac终端用Sublime打开指定文件或文件夹
    [Spring常见问题]java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
    Flask_Flask-Mail邮件扩展(十三)
    Flask_Flask-Migrate数据迁移扩展(十二)
    Flask + flask_sqlalchemy + jq 完成书籍展示、新增、删除功能
    Flask_CSRF保护(十一)
    SQLAlchemy(十)
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3109943.html
Copyright © 2020-2023  润新知