解决列高度自适应(列高度相同)的五种方法

解决列高度自适应(列高度相同)的五种方法

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，完全的自适应高度。

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

演示：2equalising.html

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

posted on 2006-12-25 14:54 Steveson 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/Steveson/archive/2006/12/25/603084.html