css frame
司空俊雅
当今的WEB应用要适应各种不同的大小的显示器，很多HTML元素支持百分比，可以完成比例布局。但实际的布局不只有百分比，也有固定大小的部分，单纯使用百分比是无法实现的。通常要实现这一布局自适应，传统的方法是用frame来实现，但是会存在页面加载不一致、搜索引擎收录困难等问题。现在一般用CSS或javascript技术来实现，有时还需要两者结合使用。
CSS实现布局主要是靠CSS的绝对定位和边距设置，来看HTML内容：
上面的样式指定了页面的大小显示区的100%，对左边设置了宽度，对上边设置了高度，对内容区设置了左边距和上边距，都采用绝对定位。如果要继续在内容区中使用百分比，需要把定位方式设置为fixed。大多数现现代浏览器都支持以上样式，fixed和max-height这样的属性IE6不支持，需要添加以下样式：
以CSS方式实现比较简洁，不影响性能，如果是特别复杂的嵌套布局，可以采用javascript布局组件。当前可以选择jquery UI.Layout plug-in 和jLayout。它们的缺点是前者要引入30多K的脚本文件，后者只有几K但是需要页面是XHTML规范。在项目中具体采用哪种方式，要根据非功能性需求来进行选择。
CSS实现布局主要是靠CSS的绝对定位和边距设置，来看HTML内容：
<body>
<div id="framecontentLeft">left</div>
<div id="framecontentTop">top</div>
<div id="maincontent">content</div>
</body> 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布局组件。当前可以选择jquery UI.Layout plug-in 和jLayout。它们的缺点是前者要引入30多K的脚本文件，后者只有几K但是需要页面是XHTML规范。在项目中具体采用哪种方式，要根据非功能性需求来进行选择。
类似资料：