当前位置:首页 > 开发 > Web前端 > 前端 > 正文

三种Div高度自适应的方法

发表于: 2014-08-02   作者:agevs   来源:转载   浏览:
摘要: 让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。 1、JS法 代码如下。原理:用JS判断左右DIV的高度,若不一致则设为一致。前端资源分享 01 < div  style = "width:500px;background:#cccc

让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 autowidth:960pxbackground:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}
2 .endArea .col1{float:leftwidth:573px; }
3 .endArea .col2{float:leftwidth:25px; }
4 .endArea .col3{float:rightwidth: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高度自适应,请根据你自己的需要,三选一。

三种Div高度自适应的方法

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
关于div高度的自适应,一直是个让人头疼的问题,整理了一下以前总结的方法,仅表示我也玩过。 html
//左右div自适应高处理 var hl = $(".f_left").outerHeight(); //获取左侧#left层的高度 var hr = $
很多的Web designer在刚接触W3C标准的时候,都遇到过高度自适应的问题。因为div等对象的height:100%
在WEB开发过程中,有些需求要求DIV的高度随着浏览器窗口的改变而改变。 这里我就列举两种情况: ①
引子 父页面里控制子页面 子页面里控制父页面 一、引子 我们先看一个示例,有两个页面,1.html通过i
在WEB开发过程中,有些需求要求DIV的高度随着浏览器窗口的改变而改变。 这里我就列举两种情况: ①
ZT:DIV高度自适应及应该注意的问题 http://developer.51cto.com/art/201008/222367.htm 本文和大家
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边
转于:http://www.divcss5.com/jiqiao/j612.shtml ----------------------------------------------
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号