首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
Google
解决列高度自适应(列高度相同)的五种方法
来源:天极网 2006年05月19日 10:46 网友评论:0条 点击:

1.背景图填充
这是使用最广泛的一种做法,无hacks,推荐使用:

2.采用脚本控制列的高度(一)
需要事先知道哪列的高度,以此为基准用脚本控制。

document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代码是以sideright的基准高度来控制sideleft的高度。

代码简单,但比较被动:

3.采用脚本控制列的高度(二)
不需要事先知道哪列的高度,脚本自动判断。

代码较复杂,有点延时:

4.采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。

hacks比较多(主要是opera的),但容易使用,推荐:

5.采用负的左右边界和相对定位
下面的例子能较好地解决列高度相同的问题。

三行二列布局,主要内容在左边,网页宽度750px,左列580px,右列170px。

      CSS代码:

以下是引用片段:
#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 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,完全的自适应高度。

缺点:现在的代码只能左对齐。

演示:

参考资料:http://www.pmob.co.uk/temp/2equalising-columns-separate-good-2.htm

上一篇:CSS入门教学十四个问与答   下一篇:手写样式表:CSS语法全攻略(上)
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】