基於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刪除。

猜您在找 jquery iframe自適應高度 iframe框架頁中的高度自適應 iframe高度自適應 jquery庫實現iframe自適應內容高度和寬度 jQuery簡單實現iframe的高度根據頁面內容自適應的方法 jQuery iframe自適應高度及其跨域問題 iframe高度自適應的方法【html】iframe 的高度自適應同域iframe的高度自適應 Iframe 高度自適應，js控制Iframe 高度自適應