三种有效解决DIV高度自适应的方法

本文和大家重点讨论一下DIV高度自适应的三种有效解决方法，它们分别是一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。

我们提供的服务有：成都做网站、网站设计、微信公众号开发、网站优化、网站认证、临沂ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的临沂网站制作公司

DIV高度自适应的三种有效解决方法

DIV＋CSS设计俨然已成网页设计界的标准了。这种设计的好处大家都是知道的，但有些小问题确实很棘手，例如令人头痛的“DIV高度自适应”问题。

现在有三种解决DIV高度自适应行之有效的办法，一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。

1、JS法

代码如下。原理：用JS判断左右DIV的高度，若不一致则设为一致。

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2. 
  
  
  
  3. float:left;border:1pxsolid#265492;">left
 
  • background:#376037;"> 
  • right
     
  • right
     
  • right
     
  • right
     
  • right
     
  • right
     
  • right
     
  •  
  •  
  •  
  •  
  •  
  •  
  •  

    •  2、背景图填充法

    第二种解决DIV高度自适应的方法是背景图填充法，这是大站用得比较多的方法，如163等，研究了一下，结果如下。

    这里是给父DIV设置了背景图片填充，所有DIV都不设高度。

    HTML代码（取自163最终页面）：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2. 第一列　左边正文 
      3. 
  
  
  
    3. 第二列　右边

       
      4. 
  
  
  
    4.  
      5. 
  
  
  









    5. 字字 
      6. 
  
  
  
    6. 第三列　中间图片 
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10.

     CSS代码（取自163最终页面）：

     
 
 
      
  
  
  
    1. .endArea{margin:0auto;width:960px;  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3. background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif);clear:both;}  
      4. 
  
  
  
    4. .endArea.col1{float:left;width:573px;}  
      5. 
  
  
  
    5. .endArea.col2{float:left;width:25px;}  
      6. 
  
  
  
    6. .endArea.col3{float:right;width:362px;}  
      7. 
  
  
  
    7.  
      8.

     3、补丁大法

    最后一种DIV高度自适应的方法就是补丁大法。就是　“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类一点的方法，在IE6、IE7、FF3下测试通过。原理自己理解。

    要点：

    1、父DIV设置　overflow:hidden;

    2、对要高度自适应的DIV设置　padding-bottom:100000px;margin-bottom:-100000px;两列或多列同理。

    代码如下：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. Copterfly'sBlog 
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11. 
  
  
  
    12. background:#777;">Left 
      13. 
  
  
  
    13. 
  
  
  
    14. background:#999;"> 
      15. 
  
  
  
    15. Middle
       
      16. 
  
  
  
    16. Middle
       
      17. 
  
  
  
    17. Middle
       
      18. 
  
  
  
    18. Middle
       
      19. 
  
  
  
    19. Middle
       
      20. 
  
  
  
    20. Middle
       
      21. 
  
  
  
    21. Middle
       
      22. 
  
  
  
    22. Middle
       
      23. 
  
  
  
    23. Middle
       
      24. 
  
  
  
    24.  
      25. 
  
  
  
    25. 
  
  
  
    26. background:#888;">Right 
      27. 
  
  
  
    27.  
      28. 
  
  
  
    28.  
      29. 
  
  
  
    29.  
      30.

     请根据实际情况，三选一用。

    名称栏目：三种有效解决DIV高度自适应的方法
    网址分享：http://www.shufengxianlan.com/qtweb/news22/261672.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站设计公司知识

    行业网站建设

    成都网站建设报价　　 　成都网站设计公司　　 　营山网站建设　　 　企业网站建设　　 　全网营销　　 　橡塑板　　 　微信小程序开发　　 　四川成都seo网站优化　　 　专业网站建设　　 　成都娃娃鱼　　 　腾讯云香港空间　　 　网络推广外包　　 　产品包装设计　　 　成都app软件开发　　 　微信小程序开发　　 　手提袋印刷制作　　 　重庆主机托管　　 　网站服务器租用　　 　迷你发光字　　 　免备案空间腾讯云