基于jquery后台框架设计，自适应高度，iframe简易版
<html >
<head>
<title>jqueryuejin简易后台框架设计</title>
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
layoutrezise();
AutoHeight();
})
function layoutrezise() {
var headerH = $("div#Headbox").height();
var footerH = $("div#Footerbox").height();
var bodyerH = $(window).height() - headerH - footerH;
$("div#Bodybox,div#bleftBox,div#brightBox,iframe#leftiframe,iframe#mainframe").height(bodyerH);
$("div#brightBox").width($(window).width() - $("div#bleftBox").width());
}
function AutoHeight() {
$(window).resize(function () {
layoutrezise();
})
}
</script>
</head>
<body>
<div >
顶部
</div>
<div >
<div >
<iframe name="leftiframe" src="/Manage/Left"></iframe>
</div>
<div >
<iframe name="mainframe" src="/Manage/Welcome"></iframe>
</div>
<div class="clear"></div>
</div>
<div >
底部
</div>
</body>
</html>注意：
1、文档中html样式设置成( 以兼容IE)
2、iframe样式设置为：
3、需要固定Headbox和Footerbox的高度以及bleftBox的宽度，才得以正常自适应中间区域的高度和宽度。
4、布局中的div不要设置border宽度，以免计算高度和宽度时有误差
- 上一篇 »css实现自适应屏幕高度
- 下一篇 »【HTML】iframe嵌套界面自适应，可高度自由收缩