cssframe
当今的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不⽀持，需要添加以下样式：css布局左边固定右边自适应
* 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规范。在项⽬中具体采⽤哪种⽅式，要根据⾮功能性需求来进⾏选择。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。