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

<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宽度，以免计算高度和宽度时有误差

 

 

posted @ 2013-01-15 18:16  yuejin  阅读(5654)  评论(0)  编辑  收藏  举报