本帖子已过去太久远了，不再提供回复功能。解决div列高度自适的3种常用方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
解决div列高度自适的3种常用方法
上传于|0|0|文档简介
&&div+ccs技巧教程
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢您所在的位置： &
三种有效解决DIV高度自适应的方法
三种有效解决DIV高度自适应的方法
DIV高度自适应的问题你是否了解，本文向大家描述一下DIV高度自适应的三种有效解决方法，希望对你的学习有所帮助。
本文和大家重点讨论一下DIV高度自适应的三种有效解决方法，它们分别是一是JS法、二是背景图填充法、三是&补丁大法&（比较变态）。
DIV高度自适应的三种有效解决方法
DIV＋CSS设计俨然已成网页设计界的标准了。这种设计的好处大家都是知道的，但有些小问题确实很棘手，例如令人头痛的&DIV高度自适应&问题。
现在有三种解决DIV高度自适应行之有效的办法，一是JS法、二是背景图填充法、三是&补丁大法&（比较变态）。
代码如下。原理：用JS判断左右DIV的高度，若不一致则设为一致。
divstyle=&width:500background:#height:0&&divid=&right&style=&width:380%;height:100%; &float:border:1pxsolid#265492;&left&divid=&left&style=&width:60%;;float: &background:#376037;&&right&right&right&right&right&right&right&&&&scripttype=&text/javascript&&&!-- &vara=document.getElementById(&left&); &varb=document.getElementById(&right&); &if(a.clientHeight) &{ &a.style.height=b.clientHeight+&px&; &} &else &{ &b.style.height=a.clientHeight+&px&; &} &--&&&
2、背景图填充法
第二种解决DIV高度自适应的方法是背景图填充法，这是大站用得比较多的方法，如163等，研究了一下，结果如下。
这里是给父DIV设置了背景图片填充，所有DIV都不设高度。
HTML代码（取自163最终页面）：
divclass=&endArea&&divclass=&col1&第一列　左边正文&divclass=&col3&第二列　右边&&字字&divclass=&col2&第三列　中间图片&divclass=&clear&&&&
CSS代码（取自163最终页面）：
.endArea{margin:0width:960 &&background:url(/cnews/img07/end_n_bg1.gif);clear:} &.endArea.col1{float:width:573} &.endArea.col2{float:width:25} &.endArea.col3{float:width:362} &&
3、补丁大法
最后一种DIV高度自适应的方法就是补丁大法。就是　&隐藏容器溢出&和&正内补丁&和&负外补丁&结合的方法。比较另类一点的方法，在IE6、IE7、FF3下测试通过。原理自己理解。
1、父DIV设置　overflow:
2、对要高度自适应的DIV设置　padding-bottom:100000margin-bottom:-100000两列或多列同理。
代码如下：
&&metahttp-equiv=&Content-Type&content=&text/charset=gb2312&&Copterfly'sBlog&styletype=&text/css&&&!-- &#wrap{overflow:} &#sidebar_left,#sidebar_right{padding-bottom:100000margin-bottom:-100000} &--&&&&divid=&wrap&style=&width:300background:#FFFF00;&&divid=&sidebar_left&style=&float:width:100 &background:#777;&Left&divid=&sidebar_mid&style=&float:width:100 &background:#999;&&Middle&Middle&Middle&Middle&Middle&Middle&Middle&Middle&Middle&&divid=&sidebar_right&style=&float:width:100 &background:#888;&Right&&&&
请根据实际情况，三选一用。
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
Angular.js 是一个MV*（Model-View-Whatever，不管是MVC或者MVVM
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
国庆假期前的612，是不是有点折腾？网上的中秋国庆放
刚刚开始接触java数组的人都会听到一句类似的话：java
9月的工作日被法定假日拆的零零散散，不知道各位的工
J2EE是目前企业级软件开发的首选平台。本书从架构的角度讲解了一个完整的J2EE系统的搭建。内容包括：正则表达式、JSP、Swing、XM
51CTO旗下网站}