论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

解决列高度自适应的五种方法!

文章类别:div+css布局 | 发表日期:2008-9-26 11:12:38

1.背景图填充
这是使用最广泛的一种做法,无hacks,推荐使用:
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]


2.采用脚本控制列的高度(一)
需要事先知道哪列的高度,以此为基准用脚本控制。
document.getElementById(\"sideleft\").style.height=document.getElementById(\"sideright\").scrollHeight \"px\"
上面的代码是以sideright的基准高度来控制sideleft的高度。
代码简单,但比较被动:
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]


3.采用脚本控制列的高度(二)
不需要事先知道哪列的高度,脚本自动判定。
代码较复杂,有点延时:
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]


4.采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。
hacks比较多(主要是opera的),但轻易使用,推荐:
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]


5.采用负的左右边界和相对定位
下面的例子能较好地解决列高度相同的问题。
三行二列布局,主要内容在左边,网页宽度750px,左列580px,右列170px。
CSS代码:
div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

xhtml代码:
div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"middle\">
<div id=\"sideright\">
<div id=\"sideleft\">
</div>
</div>
</div>

从结构看,middle(使用的是左列希望的背景色)在最外面,宽度等于sideleft的宽度,往里一层是sideright,其宽度为170px,浮动方向是右边。但其右面的边界是负的170px,相当于将sideright拉向右面(右面紧贴着middle的右边)170px的位置。而sideleft又是套在sideright里面的,其内容先于sideright出来,左边界是负的580,相当于在sideright左边580px,此时sideleft和middle位置重合。
优点:不需要背景图片,无hacks,完全的自适应高度。
缺点:现在的代码只能左对齐。
演示:
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

参考资料:http://www.pmob.co.uk/temp/2equalising-columns-separate-good-2.htm
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058