三种有效解决DIV高度自适应的方法-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

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

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

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

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

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

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

1、JS法

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

 
 
 
  
  
   
  
  
  
  
  
  
float:left;border:1pxsolid#265492;">left

background:#376037;">

right

2、背景图填充法

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

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

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

 
 
 
  
  
   
  
  
  第一列　左边正文

第二列　右边

字字

第三列　中间图片

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

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

3、补丁大法

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

要点：

1、父DIV设置　overflow:hidden;

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

代码如下：

 
 
 
  
  
   
  
  
   
  
  
   
  
  
  Copterfly'sBlog 
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
  
  
  
background:#777;">Left

新闻中心

其他资讯