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

 

 

你可能感兴趣的:(jquery)