四种方法解决DIV高度自适应问题

本文和大家重点讨论一下解决DIV高度自适应的方法，这里主要从四个方面来向大家介绍，相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识。

术业有专攻，您咨询的再多，也不如我了解的一半多；有责任心的专业网站制作公司会做到“客户想到的我们要做到，客户没有想到的我们也要帮客户做到“。我们的设计师是5年以上的设计师，我们不仅仅会设计网站，更会策划网站。

DIV高度自适应

关于DIV高度的自适应，一直是个让人头疼的问题，整理了一下以前总结的方法，仅表示我也玩过。

htmlcode:

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2. 　　这边的高度自适应右侧的高度
 
  • 　　 
  • 　　　　 
  • 　　　　　　for(i=0;i<10;i++){  
  • 　　　　　　　　document.write(i+'
    ');  
  • 　　　　　　}  
  • 　　　　 
  • 　　
    •  
  •  
  •  

    •  可用的方法大概有以下四种：

    1，用absolute设置一个足够高的高度，在父级元素中清除溢出的部分,具体的csscode如下：

     
 
 
      
  
  
  
    1. #container{font-size:14px;width:300px;overflow:hidden;  
      2.   
  
  
    2.  
      3.   
  
  
    3. border:3pxsolidblue;margin:10pxauto0;  
      4.   
  
  
    4. color:#fff;position:relative;}  
      5.   
  
  
    5. #leftSide{width:100px;float:left;height:200000px;  
      6.   
  
  
    6.  
      7.   
  
  
    7. left:0;top:0;position:absolute;background:gray;}  
      8.   
  
  
    8. #rightSide{width:190px;float:right;  
      9.   
  
  
    9.  
      10.   
  
  
    10. text-align:center;background:purple;}  
      11.

    其实这种方法并没有真正的实现左右两个div等高，只是用了障眼法，利用container的overflow:hidden清除了左侧多余的部分，以达到视觉上左右等高的目的，虽然有“白猫黑猫，逮着老鼠就是好猫”的说法，但是笔者并不着重推荐这种方法，因为给父级元素添加relative，会带来很多不必要的麻烦，况且只能是设置absolute的一侧自适应另一侧的高度，并不能让两侧中任一侧去自由去适应另一侧！

    2，负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

     
 
 
      
  
  
  
    1. #container{font-size:14px;width:300px;overflow:hidden;  
      2.   
  
  
    2. border:3pxsolidblue;margin:10pxauto0;color:#fff;}  
      3.   
  
  
    3. #leftSide{width:100px;float:left;background:gray;  
      4.   
  
  
    4.  
      5.   
  
  
    5. padding-bottom:9999px;margin-bottom:-9999px;}  
      6.   
  
  
    6. #rightSide{width:190px;float:right;text-align:center;  
      7.   
  
  
    7.  
      8.   
  
  
    8. background:purple;padding-bottom:9999px;  
      9.   
  
  
    9. margin-bottom:-9999px;}  
      10.

    3，利用javascript脚本实现动态设置高度

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2. 　　varleft=document.getElementById('leftSide');  
      3.   
  
  
    3. 　　varright=document.getElementById('rightSide');  
      4.   
  
  
    4. 　　if(left.offsetHeight>=right.offsetHeight){  
      5.   
  
  
    5. 　　　　right.style.height=left.offsetHeight+'px';  
      6.   
  
  
    6. 　　}else{  
      7.   
  
  
    7. 　　　　left.style.height=right.offsetHeight+'px';  
      8.   
  
  
    8. 　　}  
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.

     事实上，这种办法真正意义上实现了两侧等高，并且能让两侧中任一侧去自由去适应另一侧，但是其缺点就在于，只有当DOM加载完成后，才有会这样等高的效果，如果网速够快，这个漏洞可以忽略不计。

    4，在父级元素中填充背景

    CSS code如下：

     
 
 
      
  
  
  
    1. #container{font-size:14px;width:300px;overflow:hidden;  
      2.   
  
  
    2. border:3pxsolidblue;  
      3.   
  
  
    3.  
      4.   
  
  
    4. margin:10pxauto0;color:#fff;  
      5.   
  
  
    5.  
      6.   
  
  
    6. background:url(http://www.men-ideal.com/images/unit1030.jpg)repeat-y;}  
      7.   
  
  
    7. #leftSide{width:100px;float:left;}  
      8.   
  
  
    8. #rightSide{width:190px;float:right;text-align:center}  
      9.

     目前，这种方法是最流行的，同样也是一种“欺骗性”的解决办法，不过除了多使用一张图片之外，都可以堪称完美，这也是笔者极力推荐的！

    网站标题：四种方法解决DIV高度自适应问题
    当前地址：http://www.shufengxianlan.com/qtweb/news22/494072.html

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

    广告

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

    猜你还喜欢下面的内容

    静态网站知识

    各行业网站

    宜宾网站建设　　 　成都做网站　　 　LED亮化工程　　 　网站解决方案　　 　新华建筑装饰　　 　成都网站建设　　 　成都定制高级网站建设　　 　南宁旺客科技　　 　四川门窗　　 　自贡服务器托管　　 　泸州网站建设　　 　成都小程序开发　　 　小谭建站工作室　　 　温岭熙道网站　　 　网站seo优化　　 　营销网站定位　　 　bgp多线机房托管　　 　成都服务器运维　　 　重庆网站建设　　 　域名注册