三种Div高度自适应的方法

时间 2019-11-08

标签三种 div 高度自适应方法栏目 CSS 繁體版

原文原文链接

三种Div高度自适应的方法

DIV高度自适应，这是在网页设计中常遇到的问题，为了给你们提供参考，这里提供3种div高度自适应的方法：一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。javascript

一、JS法css

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

 
      01 
      <div style="width:500px;background:#cccccc;height:0px;"> 
     
      02 
      <div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div> 
     
      03 
      <div id="left" style="width:60%;;float:left;background:#376037;"> 
     
      04 
      right<br> 
     
      05 
      right<br> 
     
      06 
      right<br> 
     
      07 
      right<br> 
     
      08 
      right<br> 
     
      09 
      right<br> 
     
      10 
      right<br> 
     
      11 
      </div> 
     
      12 
      </div> 
     
      13 
      <script type="text/javascript"> 
     
      14 
      <!-- 
     
      15 
      var a=document.getElementById("left"); 
     
      16 
      var b=document.getElementById("right"); 
     
      17 
      if(a.clientHeight<b.clientHeight){ 
     
      18 
        a.style.height=b.clientHeight+"px"; 
     
      19 
      }else{ 
     
      20 
        b.style.height=a.clientHeight+"px"; 
     
      21 
      } 
     
      22 
      --> 
     
      23 
      </script>

二、背景图填充法java

这是大站用得比较多的方法，如163等，研究了一下，结果以下。ide

这里是给父DIV设置了背景图片填充，全部DIV都不设高度。测试

HTML代码：ui

 
      1 
      <div class="endArea"> 
     
      2 
      <div class="col1">第一列　左边正文</div> 
     
      3 
      <div class="col3">第二列　右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div> 
     
      4 
      <div class="col2">第三列　中间图片</div> 
     
      5 
      <div class="clear"></div> 
     
      6 
      </div>

CSS代码：url

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

三、补丁大法spa

就是“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类的方法，在IE六、IE七、FF3下测试经过。要点：设计

一、父DIV设置　overflow:hidden;

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

代码以下：

 
      01 
      <html> 
     
      02 
      <head> 
     
      03 
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
     
      04 
      <title>Div高度自适应</title> 
     
      05 
      <style type="text/css"> 
     
      06 
      #wrap{overflow:hidden;} 
     
      07 
      #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} 
     
      08 
      </style> 
     
      09 
      </head> 
     
      10 
      <body> 
     
      11 
      <div id="wrap" style="width:300px; background:#FFFF00;"> 
     
      12 
      <div id="sidebar_left" style="float:left;width:100px; background:#777;">居左</div> 
     
      13 
      <div id="sidebar_mid" style="float:left;width:100px; background:#999;"> 
     
      14 
      居中<br /> 
     
      15 
      居中<br /> 
     
      16 
      居中<br /> 
     
      17 
      居中<br /> 
     
      18 
      居中<br /> 
     
      19 
      居中<br /> 
     
      20 
      居中<br /> 
     
      21 
      </div><div id="sidebar_right" style="float:right;width:100px; background:#888;">居右</div></div> 
     
      22 
      </body> 
     
      23 
      </html>

以上三种方法均可以解决Div高度自适应，请根据你本身的须要，三选一。