DIV高度自适应方法汇总

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

创新互联公司长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为柳南企业提供专业的网站设计制作、成都网站建设，柳南网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

DIV高度自适应方法汇总

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

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

2、纯CSS方法；

3、加背景图片实现。

◆DIV+CSS基本布局：

 
 
 
    
  
  
  
  1.  
    2.
 
    •  
  •  

    1、js实现div高度自适应

    代码如下：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5.

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

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

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

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

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

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

    XHTML代码：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2. 这是第一列 
      3. 
  
  
  
    3. 这是第二列 
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7.

     CSS代码:

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

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

    当前名称：DIV高度自适应方法汇总
    新闻来源：http://www.csdahua.cn/qtweb/news43/159593.html

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

    广告

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

    成都快上网为您推荐相关内容

    网站设计公司知识

    行业网站建设

    400电话办理　　 　四川胜锦安防　　 　边坡柔性防护网　　 　娄底尾呼妄服装　　 　成都圣月制冷　　 　成都logo设计公司　　 　成都网站改版　　 　做网站　　 　资阳服务器托管　　 　网站建设改版　　 　鸿艺文化　　 　四川服务器托管　　 　手机网站制作　　 　成都主机租用　　 　成都茶叶销售　　 　网络推广公司　　 　鸿艺文化传播　　 　成都网站建设　　 　成都网络营销　　 　商城网站