您的位置：首页 > Web前端 > JQuery

基于jquery后台框架设计(自适应高度，iframe简易版)

2013-01-15 18:16 591 查看

<html style="overflow:hidden">
<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 id="Headbox">
顶部
</div>
<div id="Bodybox">
<div id="bleftBox" style="width:200px">
<iframe id="leftiframe" name="leftiframe" style="width:100%; border:0;" src="/Manage/Left"></iframe>
</div>
<div id="brightBox">
<iframe id="mainframe" name="mainframe" style="width:100%; border:0;" src="/Manage/Welcome"></iframe>
</div>
<div class="clear"></div>
</div>
<div id="Footerbox">
底部
</div>
</body>
</html>

注意：
1、文档中html样式设置成style="overflow:hidden"( 以兼容IE)
2、iframe样式设置为：style="width:100%; border:0;"
3、需要固定Headbox和Footerbox的高度以及bleftBox的宽度，才得以正常自适应中间区域的高度和宽度。
4、布局中的div不要设置border宽度，以免计算高度和宽度时有误差

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航