« 外企员工 超九成人过劳巴巴变的惊喜 »

CSS布局:高度自适应+各列背景图自适应延伸之完美解决方案

在zblog菠萝秀凑热闹的时候,有朋友指出本站在Firefox下的兼容性问题,这让我想到了一直以来关于高度自适应的问题,确切的说应该是背景自适应的问题,因为许多布局中,需要将背景随着高度的自动变化而平铺,而过去在网上找到的许多高度自适应解决方案并没有真正解决背景图自适应平铺这一难点,这对于追求完美的我来说是个头疼的问题,幸运的是功夫不负有心人,终于在国外的一个站点上找到了新的两全其美的解决办法,并在IE和FF中测试通过!

说它完美,是因为它有以下特点:
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>

上面的方法可以解决高度自适应问题,但其兼容性较差,在我的站点上使用时经常会失效。(例如:页面使用了图片自动缩小效果后,由于图片加载的延迟,上面的js往往会以大图时的div高度为准,而不是以图片缩小之后的div高度为最终适应高度。另外,本站内页侧栏内容列表的加载延迟也会引起类似问题)

关键的是,它没有解决背景图自适应的问题。

最后介绍的完美解决方案如下:

因为是老外的杰作,所以就偷个懒直接贴原文了:)
- Download the script file (p7_eqCols2_10.js)

- 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.

完整的原文见这里

引用区:
留言区:
  • quote 1. 宣传自己
  • 2007-3-13 16:33:45
  • http://www.opz-zuoce.cn
  • 斑竹你好
    你的网站不错。很高兴看到你的文章。若你想宣传你的网站,让更多的人访问你的网站,我建议你学习一些网站优化排名的知识。我推荐你到[url=http://www.opz-zuoce.cn]搜索引擎优化排名[/url]去看看。那里有上千篇有关网站优化排名的文章,一定对你有所帮助。

发表留言:

◎朋友,期待与你在这里相识~

作者:eNic

Code from Z-Blog

© 2002-2009 www.effect.cn 版权所有 / 管理