css frame

gavin

浏览: 82777 次
性别:

最近访客更多访客>>

ztcwh

windmark

forever_u

likaiming163

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (22)

社区版块

存档分类

CSS JavaScript jQuery 浏览器搜索引擎

当今的WEB应用要适应各种不同的大小的显示器，很多HTML元素支持百分比，可以完成比例布局。但实际的布局不只有百分比，也有固定大小的部分，单纯使用百分比是无法实现的。通常要实现这一布局自适应，传统的方法是用frame来实现，但是会存在页面加载不一致、搜索引擎收录困难等问题。现在一般用CSS或javascript技术来实现，有时还需要两者结合使用。
CSS实现布局主要是靠CSS的绝对定位和边距设置，来看HTML内容：

<body>
	<div id="framecontentLeft">left</div>
	<div id="framecontentTop">top</div>
	<div id="maincontent">content</div>
</body>

三个div标签分别是左边和上边的固定大小部分和可变大小的内容区域。加在以上元素上的样式表如下：

	body{
		margin: 0;padding: 0;border: 0;overflow: hidden;	height: 100%; max-height: 100%; 
	}
	#framecontentLeft, #framecontentTop{
		position: absolute; 	top: 0; left: 0; 	width: 200px; height: 100%;	overflow: hidden;
 		background-color: navy;	color: white;
	}
	#framecontentTop{ 
		left: 200px; right: 0;width: auto;height: 120px; overflow: hidden; 
		background-color: blue;	color: white;
	}
	#maincontent{
		position: fixed;  left: 200px;  top: 120px;	 right: 0;  bottom: 0;	overflow: auto; 
		background: #fff;
	}

上面的样式指定了页面的大小显示区的100%，对左边设置了宽度，对上边设置了高度，对内容区设置了左边距和上边距，都采用绝对定位。如果要继续在内容区中使用百分比，需要把定位方式设置为fixed。大多数现现代浏览器都支持以上样式，fixed和max-height这样的属性IE6不支持，需要添加以下样式：

	* html body{ padding: 120px 0 0 200px; }
	* html #maincontent{ height: 100%; width: 100%; }
	* html #framecontentTop{ width: 100%;}

实现中没有采用css表达式是考虑性能问题将来的浏览器可能不支持。以上方式不支持嵌套，但内容区可以使用百分比。如果内容区有固定大小的元素，还有需要大小自适应的元素，建议使用javascript来计算并设置元素的高度和宽度。
以CSS方式实现比较简洁，不影响性能，如果是特别复杂的嵌套布局，可以采用javascript布局组件。当前可以选择jquery UI.Layout plug-in 和jLayout。它们的缺点是前者要引入30多K的脚本文件，后者只有几K但是需要页面是XHTML规范。在项目中具体采用哪种方式，要根据非功能性需求来进行选择。

分享到：