这篇文章主要介绍“实现CSS中div列高度自适的3种方式”，在日常操作中，相信很多人在实现CSS中div列高度自适的3种方式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”实现CSS中div列高度自适的3种方式”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
CSS技巧：解决div列高度自适的3种常用方法
解决div列高度自适的方法有很多种，这里介绍三种最常用的方法给大家（下面所有例子以父main，子divleft、divright为例）。
1、利用“clear:both”背景填充
这是使用最广泛的一种做法，我一直都用此方法解决div列高度自适问题。三行二列布局，主要内容在右边，网页宽度780px,左列240px,右列540px。
CSS代码：
#main{ width:780px; margin:0; background:url(bg.gif)#FFFFFFrepeat-yleft; text-align:left; } #divleft{ float:left; width:240px; } #divright{ float:right; width:540px; } .clear{ border-top:1pxsolidtransparent!important; margin-top:-1px!important; border-top:0; margin-top:0; clear:both; visibility:hidden; }html代码：
<dividdivid="main"> <dividdivid="divleft"></div> <dividdivid="divright"></div> <divclassdivclass="clear"></div> </div>
优点：无hacks，完全的自适应高度。
2、脚本控制DIV列高度
在<body>中加入如下代码（假设divright的高度相对***）：
<scriptlanguagescriptlanguage="javascript"> document.getElementById"divleft") .style.height=document.getElementById"divright") .scrollHeight+"px" </script>
优点：代码超级简单
缺点：要确定有某一列的高度始终是相对***的，此方法比较被动。
3、margin负值父子容器高度继承
这个方法能较好地解决DIV列高度相同的问题。三行二列布局，主要内容在左边，网页宽度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-240px00; background:#F0F0F0; }html代码：
<dividdivid="main"> <dividdivid="divleft"> <dividdivid="divright"></div> </div> </div>
或许刚接触的WebStandards的朋友对这种方法不怎么理解，现Blank分析一下：
［Ａ］
［Ｂ］［Ｃ］
上结构中a包含c，c包含b。当b的高度为***时，那么a和c将继承b的高度，如果a和b位置重合，将显示b的背景；而当c的高度***时，那么a继承将继承c的高度，如果a和b位置重合，将显示a的背景。这样无论b***或者c***都将显示div列高度相同。
优点：兼有***种方法的优点，并且比***种方法的代码稍微简洁。
缺点：整体结构只能左对齐。
到此，关于“实现CSS中div列高度自适的3种方式”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
