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

本文和大家重点讨论一下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;两列或多列同理。

代码如下：

请根据实际情况，三选一用。

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

三种有效解决DIV高度自适应的方法相关推荐

四种方法解决DIV高度自适应问题
四种方法解决DIV高度自适应问题参考文章: (1)四种方法解决DIV高度自适应问题 (2)https://www.cnblogs.com/smght/p/4505614.html 备忘一下.
三种Div高度自适应的方法
让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). 1.JS法 ...
DIV高度自适应方法汇总-----摘自网友
你对DIV高度自适应的方法是否了解,这里和大家分享一下,网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度相同,有以下几种方法. DIV高度自适应方法汇总网站优化(seo)中, ...
真正解决iframe高度自适应问题
1.前言解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂如果使用iframe时,遇到以下的需求 ...
解决iframe高度自适应
解决iframe高度自适应原因第一种方法第二种方法原因 iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题. 第一种方法这个方式更适用于嵌套的页 ...
float div高度自适应
float div高度自适应(解决div float后,父div高度无法自适应的问题) 在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父 ...
html iframe自动高度,真正解决iframe高度自适应问题
1.前言解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂如果使用iframe时,遇到以下的需求 ...
HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
这种div高度自适应确定你知道吗?
1. 随子元素div高度自适应如何下面的child1和child2浮动,parent高度就会为0,前提child1和child2都有高度,如果你想parent的高度自适应,请继续阅读 <bod ...

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

三种有效解决DIV高度自适应的方法相关推荐

最新文章

热门文章