原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
css解决div列高度自适应的三种最常用的方法
解决div列高度自适的方法有很多种，这里介绍三种最常用的方法给大家：
1、利用“clear:both”背景填充（推荐！！！）
这是使用最广泛的一种做法，我一直都用此方法解决div列高度自适问题。三行二列布局，主要内容在右边，网页宽度780px,左列240px,右列540px。
CSS代码：
#main{ width: 780px; margin: 0; background: url(bg.gif) #FFFFFF repeat-y left; text-align: left; } #divleft{ float: left; width: 240px; } #divright{ float: right; width: 540px; } .clear{ border-top:1px solid transparent !important; margin-top:-1px !important; border-top:0; margin-top:0; clear:both; visibility:hidden; }
html代码：
div id=main div id=divleft/div div id=divright/div div class=clear/div /div
优点：无hacks，完全的自适应高度。
2、脚本控制高度
在body中加入如下代码（假设divright的高度相对最高）：
script language=javascript document.getElementByIddivleft).style.height=document.getElementByIddivright).scrollHeight+px /script
优点：代码超级简单
缺点：要确定有某一列的高度始终是相对最高的，此方法比较被动。
3、margin负值父子容器高度继承
这个方法能较好地解决列高度相同的问题。三行二列布局，主要内容在左边，网页宽度780px,左列540px,右列240px。
CSS代码：
#main{ width: 540px; float:left; background:#FFFFFF; text-align:left; } #divleft{ width: 540px; float: left; position:relative; margin-left:-540px; } #divright{ width: 240px; float: right; position:relative; margin: 0 -240px 0 0; background: #F0F0F0; }
html代码：
div id=main div id=divleft div id=divright/div /div /div
或许刚接触的Web Standards的朋友对这种方法不怎么理解，现Blank分析一下：
上结构中a包含c，c包含b。当b的高度为最高时，那么a和c将继承b的高度，如果a和b位置重合，将显示b的背景；而当c的高度最高时，那么a继承将继承c的高度，如果a和b位置重合，将显示a的背景。这样无论b最高或者c最高都将显示div列高度相同。
优点：兼有第一种方法的优点，并且比第一种方法的代码稍微简洁。
缺点：整体结构只能左对齐。
文档评论（0）