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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 无法解析类型java.lang.Object_java类型转换异常

    无法解析类型java.lang.Object_java类型转换异常问题场景:1、前端传一个数组,2、后台Controller用map接收。如下@PostMapping(“add/xxxx”)publicResponseObjaddXXXX(@RequestBodyMap<String,Object>map){}3、Service业务类方法中,直接获取数组并转化为实体的集合:List<XXXX&g…

    2022年9月4日
    4
  • QCustomPlot运用

    QCustomPlot运用日常记录学习QCustomPlot的配置和编码过程。1.结构QCustomPlot类的命名规则是QCP加xxx。类的组织有很强的区分性,就如图Qt中的模块分类。  Class Name QCPPlotTitle 图表标题 QCPAxis 坐标轴、上下左右四个坐标轴 …

    2022年10月17日
    0
  • json文件的读取_c语言文件读取

    json文件的读取_c语言文件读取JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。有关于json的相关信息,可参考:json百度百科。1、HTML文档&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;title&gt;R

    2022年10月11日
    0
  • idea2019开发第一个java程序HelloWorld「建议收藏」

    idea2019开发第一个java程序HelloWorld「建议收藏」用idea2019开发第一个java程序:(马克-towin:idea破解不在本讲义范围之内)新手建议忽略此部分,先把eclipse用熟。技术是一样的。idea缺省配置是黑色的,很晃眼,可以(Files/settings/editor/colorscheme,然后右侧框中选择(Default(白色)或者Darcula(黑色)))底下都一样了。右击src/new/javaclass,名字叫…

    2022年5月24日
    37
  • JSP Include 文件方式

    JSP Include 文件方式两种方式JSPinclude文件有两种方式:1. 使用include标签,像  2.使用jsp:include标签,像              使用的差异在于:方式1比较适合引入一些静态的,比较少改动的内容;比如网页的header和footer的部分。方式2比较适合于引入改动较多的页面。

    2022年7月13日
    16
  • Atitit.列表页and查询条件的最佳实践(1)——设定搜索条件and提交查询and返回json数据

    Atitit.列表页and查询条件的最佳实践(1)——设定搜索条件and提交查询and返回json数据

    2022年1月14日
    86

发表回复

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

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