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

本文转载自查看原文 2013-01-15 18:16 5344 JavaScript/ Jquery

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 iframe框架页中的高度自适应 jQuery iframe自适应高度及其跨域问题 iframe高度动态自适应 iframe 高度宽度自适应简易版jQuery——mQuery 让框架的高度自适应如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题) 页面嵌套iframe时，怎样让iframe高度根据自身内容高度自适应关于iframe的使用以及自适应页面高度 iframe高度随内容自适应的方法