adminLte解决iframe高度问题

adminLte解决iframe高度问题adminLte默认是全局刷新,也就是不存在frame页面,经过修改,可以很容易实现右边内容框用frame实现页面刷新,这样就不需要整个页面全局刷新,点击相应菜单时,只会刷新frame窗口,但是有一个问题就是frame默认高度只有一丁点,百度之后用了自适应也会有各种问题,比如高度只能拉伸不会缩短,在解决的道路上真的是没有一个完美的解决方案,经过自己研究,发现一个非常简单的方法,那就是用js获取wi…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

adminLte默认是全局刷新,也就是不存在frame页面,经过修改,可以很容易实现右边内容框用frame实现页面刷新,这样就不需要整个页面全局刷新,点击相应菜单时,只会刷新frame窗口,但是有一个问题就是frame默认高度只有一丁点,百度之后用了自适应也会有各种问题,比如高度只能拉伸不会缩短,在解决的道路上真的是没有一个完美的解决方案,经过自己研究,发现一个非常简单的方法,那就是用js获取window的innerHeight,代码实现window.innerHeight,然后出去顶部的状态栏,以及空白部分,经过测试,窗口高度减去90是最合适的,也可以根据你自己的情况加减,最后调至一个最完美高度,发现任何分辨率都不会有问题!

代码如下:

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <!-- Main content -->
    <section class="content container-fluid">
        <iframe id="menuFrame" name="menuFrame" src="{:url('admin/index/welcome')}" style="overflow:visible;"
                scrolling="auto"
                frameborder="no" height="100%" width="100%">
        </iframe>
        <!--------------------------
          | Your Page Content Here |
          -------------------------->

    </section>
    <!-- /.content -->
</div>

 

<script>
    $("#menuFrame").height(window.innerHeight-90);
</script>

 

更新问题:第一次加载页面时高度固定了,无法动态改变。

解决方案:js监听每次frame的地址变化后重新计算改变高度

 

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/164544.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月27日 上午9:16
下一篇 2022年7月27日 上午9:16


相关推荐

  • 简单好玩的手机编程代码

    简单好玩的手机编程代码想学编程没有电脑 手机也能编程 为了让大家在任何时候都可以进行编程 这次给大家推荐四款手机编程 APP 让你不论在何时何地都可以化身码农 甚至暂时没有电脑 但是又想 Java AIDE 集成开发环境 AIDE 集成开发环境可以直接编译运行 Java 代码 同时还可以编写简单的安卓程序 支持自动补全 代码高亮 语法提示 程序猿老爸的高质量陪玩 造物粒子编程版科技小制作 小小工程师梦想萌芽编程也给他们带来了很多难得的品质 例如条理清晰逻辑性强 要知道一个简单前台功能的展现可能需要在后台编辑上百条代码 独立思考能力强

    2026年3月17日
    1
  • 陈述python中运算符的优先级_numpy逻辑运算符

    陈述python中运算符的优先级_numpy逻辑运算符python逻辑运算符1.成员andornot优先级:()>not>and>or2.and逻辑运算符and,aandb,如果a和b都为True,则返回True,如果其中一个为False,返回False,简言之:一假则假,全真则真3.or逻辑运算符or,aorb,如果a和b有一个为True,则返回True,如果全为False,返回False,简言之:一真则真…

    2025年8月10日
    4
  • MSM8953配置I2C及SPI

    MSM8953配置I2C及SPI此次完成的任务是要使能高通8953平台的i2c和spi,主要做的工作就是在设备树文件中添加节点信息。主要的工作在于对设备树文件的修改,主要修改了msm8953-pinctrl.dtsi和msm8953.dtsi两个文件。msm8953-pinctrl.dtsi是配置MSM8953芯片中的GPIO。在此文件中定义i2c使用哪个gpio。因为引脚复用功能的存在,所以要先配置i2c的引脚复用功能…

    2022年10月18日
    4
  • 106-Latex矩阵过大问题

    106-Latex矩阵过大问题参考 LaTeX 技巧 376 如何解除 amsmath 中的 bmatrix 限制 10 列 在 Latex 中编辑矩阵 有时提示行数或列数过多 比如下面这个 begin bmatrix 0 amp 0 amp 0 amp 0 amp 0 amp 0 amp 0 amp 0 amp 0 amp 0 amp 0 amp 0 0 amp 0 amp 0 amp a

    2026年3月18日
    2
  • mysql表锁与行锁_考核机制表

    mysql表锁与行锁_考核机制表MySQL表锁和行锁机制行锁变表锁,是福还是坑?如果你不清楚MySQL加锁的原理,你会被它整的很惨!不知坑在何方?没事,我来给你们标记几个坑。遇到了可别乱踩。通过本章内容,带你学习MySQL的行锁,表锁,两种锁的优缺点,行锁变表锁的原因,以及开发中需要注意的事项。还在等啥?经验等你来拿!MySQL的存储引擎是从MyISAM到InnoDB,锁从表锁到行锁。后者的出现从某种程度上是弥补前者的…

    2026年4月18日
    6
  • ORACLE 的触发器类型有哪些,ORACLE触发器类型

    ORACLE 的触发器类型有哪些,ORACLE触发器类型1.DML触发器由对表的INSERT,DELETE,UPDATE激发CREATEORREPLACETRIGGERtrigger_nameAFTER–TIMING:BEFOREORAFTERDELETEORINSERTORUPDATEONtable_name–STATEMENT–REFERE…

    2022年7月11日
    18

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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