让框架的高度自适应

让框架的高度自适应

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

主要是通过以下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=”width:225px; background:#e9e9eb;” class=”fl”>

            <iframe id=”leftiframe” name=”leftiframe” style=”width:100%; border:0;” src=”HxLeft.html”></iframe>

        </div>

        <div id=”brightBox” class=”fl”>

            <iframe id=”mainframe” name=”mainframe” style=”width:100%; border:0;” src=”SaveUser.html”></iframe>

        </div>

        <div class=”clear”></div>

    </div>

</body>

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

让框架的高度自适应

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109257.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • leetcode-17电话号码的字母组合(回溯)[通俗易懂]

    leetcode-17电话号码的字母组合(回溯)[通俗易懂]原题链接给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。示例 1:输入:digits = “23”输出:[“ad”,”ae”,”af”,”bd”,”be”,”bf”,”cd”,”ce”,”cf”]示例 2:输入:digits = “”输出:[]示例 3:输入:digits = “2”输出:[“a”,”b”,”c”] 提示:0 <= digits.le

  • 计算机组成原理知识点总结「建议收藏」

    计算机组成原理知识点总结「建议收藏」快考试了,计算机组成原理这门课学的真不咋地,自己从头看书也感觉看不下去,于是找了哈工大的慕课来学习,在这里记记重点——————————————————————————————–计算机系统可分为硬件和软件硬件:计算机的实体,如主机,外设等。软件:由具有各科特殊功能

  • java typereference_Java泛型 | Jackson TypeReference获取泛型类型信息「建议收藏」

    java typereference_Java泛型 | Jackson TypeReference获取泛型类型信息「建议收藏」前言Jackson是一个比较流行的Json序列化和反序列化框架。本文以Jackson为例介绍TypeReference实现涉及泛型的反序列化,及TypeReference的实现原理。对于获取泛型类型信息的场景,TypeReference是一个可以参考的通用解决方案。实例JacksonObjectMapper的readValue可以将Json字符串反序列化为Java对象。如下例中将[{“id”:n…

  • HTTPClient和CloseableHttpClient

    使用HttpClient发送请求的一般步骤(1)创建HttpClient对象。(2)创建请求方法的实例,并指定请求URL。如果需要发送GET请求,创建HttpGet对象;如果需要发送POST请求,创建HttpPost对象。(3)如果需要发送请求参数,可调用HttpGet同的setParams(HetpParamsparams)方法来添加请求参数;对于HttpPost对象而言,可调…

  • linux网络配置出现E325,Linux CentOS E325错误,如何解决?VI如何使用?「建议收藏」

    linux网络配置出现E325,Linux CentOS E325错误,如何解决?VI如何使用?「建议收藏」Linuxvi命令即vi编辑器,是Linux/UNIX环境下经典的编辑器。Linuxvi命令非常强大,可以使用它高效的编辑代码,配置系统文件等,运用非常广泛。但在Linux系统中打开vi编辑器时,不少朋友会提示E325:ATTENTION类的错误。那么,遇到这种情况后,该如何解决此类问题呢?为什么会出现E325:ATTENTION类的错误?出现此类错误是vi程序对文件的一种保护机制(…

  • Log4cpp介绍及使用

    Log4cpp介绍及使用

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号