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看每段代码的意思。。。根据自己实际情况进行取舍与修改~最后附上截图,希望能帮到遇到此问题的各位~

  • 相关阅读:
    [转载]Bat语法
    [转载]白手起家学习使用flex
    [转载]Highcharts结合Asp.net实现动态数据股票式图形显示实例
    [转]uploadify3.0详细使用说明
    转帖:UML实践用例图、顺序图、状态图、类图、包图、协作图
    [转]JQuery操作Table
    [转]Chrome developer tool介绍(javascript调试)
    [转载]C# 指针之美
    [转载]C# 温故而知新: 线程篇(二)
    [转载]Javascript定义类(class)的三种方法
  • 原文地址:https://www.cnblogs.com/sese/p/4940935.html
Copyright © 2011-2022 走看看