写在前面:

  最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下。

  还是直接上代码吧

 <%--iframe页面内容--%>
<div class="page-content" style="">
<iframe id="iframe_0" src="login.jsp" width="100%" height="100%" onload="changeFrameHeight(this)" scrolling="yes" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes">
</iframe>
</div>

  黄色标记的代码部分就是主要的。首先将iframe的高度设置成100%,然后在iframe加载后自动调用js函数去改变自己的高度,以适应不同的屏幕

  js方法:

function changeFrameHeight(that){
//电脑屏幕高度-iframe上面其他组件的高度
//例:我这里iframe上面还有其他一些div组件,一共的高度是120,则减去120
$(that).height(document.documentElement.clientHeight - 120); }

 给个图可能看的比较直观点,主要就是减去多余的高度就可以了

设置iframe高度自适应屏幕高度的更多相关文章

  1. js自适应屏幕高度

    //自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...

  2. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  3. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  4. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  5. Unity NGUI根据高度自适应屏幕分辨率

    Unity版本:4.5.1 NGUI版本:3.6.5 本文内容纯粹转载,转载保留参考链接和作者 参考链接:http://blog.csdn.net/asd237241291/article/detai ...

  6. div自身高度、屏幕高度

    获取元素高度 scrollWidth    //显示当前元素的宽度 scrollHeight   //显示当前元素的高度 scrollLeft     //显示当前元素的左边距左侧的距离 scroll ...

  7. css设置自适应屏幕高度

    <style type="text/css"> body,html{ margin:0; height:100%; /*这里将高度设置为100%是这个布局实现自适应高度 ...

  8. element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小

    最近写用vue2.0写一个项目,用到了走马灯效果,由于项目赶时间,想偷下懒,第一次引用了element组件(纯JS也可以写的出来,赶时间嘛,懂得....),结果用了发现一个问题,element的组件( ...

  9. css实现自适应屏幕高度

    body,html{ margin:0px; height:100%; }

随机推荐

  1. ironic如何支持部署时按需RAID?

    新浪大神推荐使用element proliant-tools制作deploy image.element proliant-tools会在ipa ramdisk中安装一个rpm包hpssacli(HP ...

  2. BZOJ 2223 [Coci 2009]PATULJCI | 主席树练习 (好像是个权限题啊)

    题目: 给个序列,问[l,r]区间内是否存在x>(r-l+1)>>1 题解: 好像大家都觉得这个题比较简单,没人写题解啊 先说BZOJ样例的格式应该是,第二个数是序列中数的范围(就是 ...

  3. javascript的Date操作(月初,月末)

    var cur = new Date(), unitDay = 24 * 60 * 60 * 1000; //月初 var sFirstDay = cur.getFullYear() + '/' + ...

  4. bzoj2693 莫比乌斯反演

    Description Hint T <= 10000N, M<=10000000   https://wenku.baidu.com/view/fbec9c63ba1aa8114431d ...

  5. Python之Excel编程

    excel编程:excel中是unicode编码方式 需要使用xrld,xlwt和openpyxl这三个模块,需先通过pip install下载     xlrd 读取模块:xls,xlsx     ...

  6. [04]JS获取文件大小方法

    </pre><pre name="code" class="html"><input id="file" ty ...

  7. shell面试经典70例

    转载自:http://www.imooc.com/article/1131 1) 如何向脚本传递参数 ? ./script argument 例子: 显示文件名称脚本 ./show.sh file1. ...

  8. md5 加解密

    using JGDJWeb.Model; using System; using System.Collections.Generic; using System.IO; using System.L ...

  9. [bzoj2127]happiness——最小割

    这个题太恶心了...并不想继续做了... 本代码在bzoj上TLE! 大致说一下思路: 建立ST,首先由S连边(S,u,a)a代表学文的分数,连向T(u,T,b)b表示学理的分数,这样构造出了两个人独 ...

  10. OpenGL入门学习(五)

    http://developer.178.com/201103/94955548786.html 今天要讲的是三维变换的内容,课程比较枯燥.主要是因为很多函数在单独使用时都不好描述其效果,我只好在最后 ...