zoukankan      html  css  js  c++  java
  • 让框架的高度自适应

    虽然框架不利于网站优化,但在类似于业务系统的后台中使用的还比较频繁。起初在写的时候,框架的高度与宽度的兼容着实让我很头疼。经过多方面查找资料,及通过自己的实践,特总结以下控制框架宽度与高度的方法。

    主要是通过以下js控制框架的高度与宽度:

    <script type="text/javascript">
        $(function () {
            layoutrezise();
            AutoHeight();
        })
        function layoutrezise() {
            var headerH = $("div#Headbox").height(); //获取头部的高度
            var bodyerH = $(window).height() - headerH;  //计算内容的高度(不包括头部)
            $("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>

    页面的主要代码如下:

    <body>
        <div id="Headbox" class="clearfix">
            <h1 class="fl">业务系统</h1>
        </div>
        <div id="Bodybox" class="clearfix">
            <div id="bleftBox" style="225px; background:#e9e9eb;" class="fl">
                <iframe id="leftiframe" name="leftiframe" style="100%; border:0;" src="HxLeft.html"></iframe>
            </div>
            <div id="brightBox" class="fl">
                <iframe id="mainframe" name="mainframe" style="100%; border:0;" src="SaveUser.html"></iframe>
            </div>
            <div class="clear"></div>
        </div>
    </body>

    大家可以通过div的结构对就js看每段代码的意思。。。根据自己实际情况进行取舍与修改~最后附上截图,希望能帮到遇到此问题的各位~

  • 相关阅读:
    【Language】 TIOBE Programming Community Index for February 2013
    【diary】good health, good code
    【web】a little bug of cnblog
    【Git】git bush 常用命令
    【web】Baidu zone ,let the world know you
    【diary】help others ,help yourself ,coding is happiness
    【Git】Chinese messy code in widows git log
    【windows】add some font into computer
    SqlServer启动参数配置
    关于sqlserver中xml数据的操作
  • 原文地址:https://www.cnblogs.com/sese/p/4940935.html
Copyright © 2011-2022 走看看