相关文章
从静态网页到动态网页再到静态网页...
北京网站设计HTML中树的实现方法
北京网页设计实践DIV＋CSS网页布局入门指南
北京网站设计网页制作之常用CSS缩写语法总结
企通互联增加网页曝光率的秘诀
网站制作使用Dreamweaver批量做web网页
北京网站建设了解flash有关图层
北京网页设计Flash MX 2004 时间轴特效（1）
网站设计Flash MX 2004 新模板应用（1）
www.qitongnet.com网页设计之css+div PK table+css
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网站制作北京网站设计解决div列高度自适的3种常用方法
北京网站制作北京网站设计解决div列高度自适的3种常用方法
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com
解决div列高度自适的方法有很多种，这里介绍三种最常用的方法给大家（下面所有例子以父main，子divleft、divright为例）。网站建设
网站建设
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; www.qitongnet.com北京网站设计
border-top:0;北京网站设计
margin-top:0;网站设计
clear:both;网站制作
visibility:hidden;企通互联
}
北京网页设计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; www.qitongnet.com北京网站设计
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>
北京网站制作<div id="divleft"></div>网站建设
<div id="divright"></div>网站设计
<div class="clear"></div>企通互联
</div>
优点：无hacks，完全的自适应高度。网站建设
网站建设
2、脚本控制高度 网站设计
北京网站建设
在<body>中加入如下代码（假设divright的高度相对最高）：北京网站建设
<script language="javascript">网站建设
document.getElementById"divleft").style.height=document.getElementById"divright").scrollHeight+"px" 企通互联北京网站建设
</script>
网站建设北京网站制作document.getElementById"divleft").style.height=document.getElementById"divright").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>
网站设计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列高度相同。 北京网站制作
网站建设
优点：兼有第一种方法的优点，并且比第一种方法的代码稍微简洁。 北京网站建设网页设计
北京网站设计
缺点：整体结构只能左对齐。
上一篇：北京网页设计DIV+CSS标准制作网页表单的select例子
下一篇：企通互联标准建站过程中注意CSS的兼容性问题