解决列高度自适应(列高度相同)的五种方法-(0)
1.背景图填充 这是使用最广泛的一种做法，无hacks，推荐使用： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta
1.背景图填充
这是使用最广泛的一种做法，无hacks，推荐使用：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
2.采用脚本控制列的高度（一）
需要事先知道哪列的高度，以此为基准用脚本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代码是以sideright的基准高度来控制sideleft的高度。
代码简单，但比较被动：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
3.采用脚本控制列的高度（二）
不需要事先知道哪列的高度，脚本自动判断。
代码较复杂，有点延时：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
4.采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。
hacks比较多（主要是opera的），但容易使用，推荐：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
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;
}
#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;
}
精彩图集
精彩文章