本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。
DIV高度自适应的三种有效解决方法
DIV+CSS设计俨然已成网页设计界的标准了。这种设计的好处大家都是知道的,但有些小问题确实很棘手,例如令人头痛的“DIV高度自适应”问题。
现在有三种解决DIV高度自适应行之有效的办法,一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。
1、JS法
代码如下。原理:用JS判断左右DIV的高度,若不一致则设为一致。
2、背景图填充法
第二种解决DIV高度自适应的方法是背景图填充法,这是大站用得比较多的方法,如163等,研究了一下,结果如下。
这里是给父DIV设置了背景图片填充,所有DIV都不设高度。
HTML代码(取自163最终页面):
CSS代码(取自163最终页面):
3、补丁大法
最后一种DIV高度自适应的方法就是补丁大法。就是 “隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类一点的方法,在IE6、IE7、FF3下测试通过。原理自己理解。
要点:
1、父DIV设置 overflow:hidden;
2、对要高度自适应的DIV设置 padding-bottom:100000px;margin-bottom:-100000px;两列或多列同理。
代码如下:
请根据实际情况,三选一用。