联系站长 加入收藏 设为首页 繁體中文 RSS
  首页 | 生活百科 | 电脑网络 | 高手学堂 | 语录名言 | 读书文学 | 极品软件 | 奇趣图片 | 站长微博  
 您的位置: 精品百字节网 >> 电脑网络 >> 网络编程 >> CSS学习 >> 正文 当前没有通告!
   □  解决div列高度自适应的常用方法   3星级
解决div列高度自适应的常用方法
[ 作者:作者不详     来源:互连网     点击数:     更新时间:2008-06-16     文章录入:Admin
【字体:
[内容提要]
解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft、divright为例)。
解决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; 
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.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> 
  或许刚接触的Web Standards的朋友对这种方法不怎么理解,现分析一下:
  [A]
  [B][C]
  上结构中a包含c,c包含b。当b的高度为最高时,那么a和c将继承b的高度,如果a和b位置重合,将显示b的背景;而当c的高度最高时,那么a继承将继承c的高度,如果a和b位置重合,将显示a的背景。这样无论b最高或者c最高都将显示div列高度相同。
  优点:兼有第一种方法的优点,并且比第一种方法的代码稍微简洁。
  缺点:整体结构只能左对齐。
上一篇文章:如何使div布局居中显示 下一篇文章:IE与Firefox的CSS兼容大全
发表评论 □告诉好友 □打印此文 □收藏此页 □关闭窗口 □返回顶部
 最新热点文章
 精品医院类网站网址大收集
 如何删除windows 2003或xp系统隐藏的...
 DedeCms管理员后台登陆经常自动退出的...
 知道IP如何用dos命令查出电脑名称
 WORD出错老是要求以安全模式打开文件...
 如何设置首页不显示页眉页脚?
 如何利用inurl命令查询网站外链及栏目...
 
 最新推荐文章
 精品医院类网站网址大收集
 如何利用宽带路由器控制局域网内电脑上...
 CSS圆角代码的实现方法
 带停顿的单行文字滚动代码
 实用的新网站免费收录提交地址精选
 Left join , Right Join, Inner Join用...
 趣话淘宝网衍生的多种新型职业
 
 最新图文
  ◇  网友评论:(只显示最新5条。评论内容只代表网友观点,与本站立场无关!)
关于本站 | 免责申明 | 网站地图 | 联系站长 | 友情链接 | 与我同在
冀ICP备06032589号【虚拟化精英群虚拟化精英群续
  Copyright© 2006-2009 100byte.Com All Rights Reserved
网站声明:本网站是公益性质网站,部分内容来源于网络,如有侵犯您权利的地方,请与精品百字节站长联系,尽快修正.
Powered By CreateLive CMS 本站法律顾问:(冀港)武镇海律师
点击这里给我发消息