三种Div高度自适应的方法

标签： div 高度 适应 | 发表时间：2014-08-02 23:20 | 作者：ariss123
出处：http://blog.csdn.net

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

1、JS法

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

Java代码   收藏代码
  1. <div style="width:500px;background:#cccccc;height:0px;">  
  2. <div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>  
  3. <div id="left" style="width:60%;;float:left;background:#376037;">  
  4. right<br>  
  5. right<br>  
  6. right<br>  
  7. right<br>  
  8. right<br>  
  9. 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>  

 

 

这是大站用得比较多的方法，如163等，研究了一下，结果如下。2、背景图填充法

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

HTML代码：

Java代码   收藏代码
  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代码：

Java代码   收藏代码
  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; 两列或多列同理。

代码如下：

Java代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>Div高度自适应</title>  
  5. <style type="text/css">  
  6. #wrap{overflow:hidden;}  
  7. #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}  
  8. </style>  
  9. </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高度自适应，请根据你自己的需要，三选一


作者：ariss123 发表于2014-8-2 15:20:34 原文链接
阅读：93 评论：0 查看评论

相关 [div 高度 适应] 推荐：

css 控制div高度自适应浏览器的高度

- - 博客园_首页
css 控制div高度自适应浏览器的高度. 20 这里是内容容这里是内容. 25 这里是内容这里是内容. 35 这里是内容这里是内容. 43 这里是内容这里是内容. 48 这里是内容这里是内容. 55 这里是内容容这里是内容. 57 这里是内容这里是内容. 64 这里是内容容这里是内容.

三种Div高度自适应的方法

- - CSDN博客Web前端推荐文章
让DIV高度自适应，这是在网页设计中常遇到的问题，为了给大家提供参考，这里提供3种div高度自适应的方法：一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）. 原理：用JS判断左右DIV的高度，若不一致则设为一致. 这是大站用得比较多的方法，如163等，研究了一下，结果如下. 这里是给父DIV设置了背景图片填充，所有DIV都不设高度.

DIV嵌套同域iframe的高度自适应

- - 编程语言 - ITeye博客
我们先看一个示例，有两个页面，1.html通过iframe嵌入2.html，两个页面都是同域的. 2.html，很多P元素将高度撑高一些.

这是一个ifrmae，嵌入在http:. //snandy.github.io/lib/iframe/1.html里

.

根据自身内容调整高度

.

表格自动适应浏览器大小及DIV浮动设计（页面自适应浏览器大小）

- - CSDN博客Web前端推荐文章
        一、表格自适应浏览器大小.       之前写了个页面，将width和height值给定死了，这样导致浏览器缩小时，表格不会跟着自动适应浏览器大小.       1.一般是给表格整体使用样式： table-layout:fixed；.       2.将表格中的各个单元格的 width和height属性值设为比例，而不是给定值.

div 添加滚动条

- - CSDN博客推荐文章
style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis" //让所有的table td都展开. overflow-y: hidden; overflow-x: scroll; width: 987px  //设置竖着没有滚动条，横着有滚动条 ，一定要设置宽度.

div在页面中的高

- - Web前端 - ITeye博客
这里是javascript中制作滚动代码的常用属性. 页可见区域宽： document.body.clientWidth;. 网页可见区域高： document.body.clientHeight;. 网页可见区域宽： document.body.offsetWidth   (包括边线的宽);. 网页可见区域高： document.body.offsetHeight (包括边线的宽);.

jQuery拖拽div实现

- - CSDN博客Web前端推荐文章
思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是. 1、组件左上角与屏幕左上角的相对位置. 2、鼠标所在坐标与组件左上角的相对位置. $(document).ready(function(){ var move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置.

HTML标签p和div的不同

- - CSDN博客Web前端推荐文章
标题：HTML标签p和div的不同. 原文：What is the difference between

and

?. 链接： http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div.

三谈Iframe自适应高度

- xiao - Koubei UED Team
一是因为这真的是一个被说烂的话题，二是因为太师傅在n年前就写过这篇再谈iframe自适应高度. 之所以再提该问题，是因为之前项目中确实遇到了这个问题的方方面面，有必要总结一下. 希望对各位有帮助，有错误请指正. 同域、子页面高度不会动态增加. 这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可.

jq 解决iframe高度自适应。

- - Web前端 - ITeye博客
已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.