这里向大家描述一下解决div列高度自适的3种常用方法，其中最常用大就是利用“clear:both”背景填充，三行二列布局，主要内容在右边，网页宽度780px,左列240px,右列540px，相信本文介绍一定会让你有所收获。
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代码：
优点：无hacks，完全的自适应高度。
2、脚本控制DIV列高度
在
中加入如下代码（假设divright的高度相对***）：
- document.getElementById"divleft")
- .style.height=document.getElementById"divright")
- .scrollHeight+"px"
优点：代码超级简单
缺点：要确定有某一列的高度始终是相对***的，此方法比较被动。#p#
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代码：
-
-
-
或许刚接触的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种途径
文章地址：http://www.shufengxianlan.com/qtweb/news44/472994.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
广告
![]()
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
创新互联