欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 建站经验 > Css&Div > 三种Div高度自适应的方法

三种Div高度自适应的方法

2018-06-26 308 收藏 0 赞一个 0 真差劲 0 去评论

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

1、JS法

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

<div style="width:500px;background:#cccccc;height:0px;">
<div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>
<div id="left" style="width:60%;;float:left;background:#376037;">
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>
<script type="text/javascript">
<!-- 
var a=document.getElementById("left");
var b=document.getElementById("right");
if(a.clientHeight<b.clientHeight){
  a.style.height=b.clientHeight+"px";
}else{ 
  b.style.height=a.clientHeight+"px";
}
-->
</script>

2、背景图填充法

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

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

HTML代码:

<div class="endArea">
<div class="col1">第一列 左边正文</div>
<div class="col3">第二列 右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>
<div class="col2">第三列 中间图片</div>
<div class="clear"></div>
</div>

CSS代码:

.endArea{margin:0 auto; 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、补丁大法

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

1、父DIV设置 overflow:hidden;

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

代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div高度自适应</title>
<style type="text/css">
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
</style>
</head>
<body>
<div id="wrap" style="width:300px; background:#FFFF00;">
<div id="sidebar_left" style="float:left;width:100px; background:#777;">居左</div>
<div id="sidebar_mid" style="float:left;width:100px; background:#999;">
居中<br />
居中<br />
居中<br />
居中<br />
居中<br />
居中<br />
居中<br />
</div><div id="sidebar_right" style="float:right;width:100px; background:#888;">居右</div></div>
</body>
</html>

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

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站所有资源(包括模板、素材、软件、字体等)仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

为您推荐
大家评论
热门搜索