自贡网站建设公司

三种有效解决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. 第一列　左边正文
     
  • 第二列　右边

     
  •  









  • 字字 
  • 第三列　中间图片 
  •  
  •  
  •  

    •  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://jxruijie.cn/article/dpoheie.html

    其他资讯