三种Div高度自适应的方法

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

1、JS法

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

01

13

2、背景图填充法

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

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

HTML代码：

1

CSS代码：

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;}

3、补丁大法

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

1、父DIV设置 overflow:hidden;

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

代码如下：

01

02

03

04

05

09

10

11

22

23

以上三种方法都可以解决Div高度自适应，请根据你自己的需要，三选一。