说它完美,是因为它有以下特点:
1、高度自适应
2、各列背景图自适应平铺
3、无论是一列、两列、还是三列。。。都可以轻松控制它们自适应(即各列等高)
4、可以动画显示高度及背景自动填充的过程。当然,你也可以关闭动画功能。
5、它提供了标签级的定义对各列高度填充的方法进行弹性控制。例如,我们可以控制补充的高度位于当前列中最后一个标签
之后。
效果演示:点击本页顶部导航菜单(摇身一变),然后按F5刷新。页面加载完毕时注意观察左侧边栏的背景填充过程。
常见的解决高度自适应的思路有:
1、css控制。这种方法个人认为弊端较多,各浏览器不同的解释标准使其兼容性及可控性变得很差,在较复杂的布局中稍不留神就会引起问题,而且其实现思路也不适合初学者。
2、JS控制。这种方法简便易行,在浏览器允许javascirpt的时候,是个不错的选择。
网上常见的js控制代码如下:
<script language="javascript" type="text/javascript">
var sidebar=document.getElementById("divSidebar").scrollHeight;
var main=document.getElementById("divMain").scrollHeight;
layoutHeight=Math.max(sidebar,main);
document.getElementById("divSidebar").style.height=layoutHeight+"px";
document.getElementById("divMain").style.height=layoutHeight+"px";
</script>
关键的是,它没有解决背景图自适应的问题。
最后介绍的完美解决方案如下:
因为是老外的杰作,所以就偷个懒直接贴原文了:)
- Place the script file in your web site folder.
- Place a link to the script file in the region of any page on which you wish to use the script:
<script type="text/javascript" src="p7_eqCols2_10.js"></script>
Make sure you adjust the path to reflect the actual location of the script file relative to your document.
- Place an onLoad call on your page's tag:
<body onLoad="P7_equalCols2(1,'c1','P','c2','P')">
The script arguments:
The first argument of the P7_equalCols2() function controls the animation. Set it to a value of 1 if you want the column heights animated when the page loads, set it to 0 (zero) if you do not want animation.
The next series of arguments tell the script which columns you wish to have the script act on. These are listed in pairs:
A. The id of the column element, in this case 'c1', that you wish to be part of the Equal Columns processing
B. The tag name of the element inside the column where you want the added vertical space to be inserted. This would usually be the last element in the column but it can be any of the elements inside the column. For example, specifying a 'P' tag would tell the script to look for the last
tag inside the column, and then apply vertical space, as needed, just below it. This approach allows for more complex outer column structures, since the added space is actually applied inside of one of the column's elements, in effect, pushing the bottom border of the column down as needed.
Note: You must always specify the tag name in capital letters, like 'P' or 'LI' or 'H4', etc.
Column ids and tag name pairs must be enclosed in single quotes, and separated by a commas.
完整的原文见这里。