三种Div高度自适应的方法 -

agevs

浏览: 70589 次
来自: 北京

最近访客更多访客>>

horsehome

guoapeng

dxt641157815

u011418776

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 各种Web前端技巧经验分享...
浏览量：0

文章分类

全部博客 (82)

社区版块

存档分类

2014-10 ( 11)
2014-09 ( 18)
2014-08 ( 40)
更多存档...

三种Div高度自适应的方法

JavaScript HTML5 jQuery CSS

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

1、JS法

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

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>

2、背景图填充法

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

这里是给父DIV设置了背景图片填充，所有DIV都不设高度。前端资源分享

HTML代码：

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代码：

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

<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高度自适应，请根据你自己的需要，三选一。

分享到：

让IE完美支持HTML5(css3)解决办法 | 我的架构经验系列文章索引

2014-08-02 15:08
浏览 999
评论(0)
论坛回复 / 浏览 (1 / 27874)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

三种Div高度自适应的方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

三种Div高度自适应的方法

评论

发表评论

相关推荐

最近访客更多访客>>