好的，今天公司分配了个解决ie中的bug的任务，其中，有一个就是iframe 的高度 100% 没有生效的问题；

一开始，由于我真的没有怎么去了解过iframe这个货，所以，网上各种搜索一大堆关于这货的资料，到最后，发现并没有卵用，没有找到问题的重点；

甚至搜索到请求头要设置X-Frame-Options这个参数的点上去了，顺带说说，X-Frame-Options这个参数：

有时候为了防止网页被别人的网站iFrame,我们可以通过在服务器设置HTTP头部中的X-Frame-Options信息
使用 X-Frame-Options 有三个可选的值：

DENY：浏览器拒绝当前页面加载任何Frame页面

SAMEORIGIN：frame页面的地址只能为同源域名下的页面

ALLOW-FROM：origin为允许frame加载的页面地址

因此如果设置的值为DENY的时候，确实是不能显示出来Frame,但是和我现在的问题并没有什么卵关系；

好了废话了这么多，现在来讲讲，为什么iframe 的高度100%会没有生效呢？

首先这只是个ie11的bug,在ie11中，要让iframe的高度100%生效，则必须要确定其父节点元素也设置了height:100%并且有效；

也即是说解决方法是在iframe的父节点元素设置css样式 height: 100%,并且是生效的；这样，iframe 的高度100%自然也就会乖乖的相对其父亲有效了；

图例：

1、before

2、after

最后，分享出来希望大家能够不要被坑到了。有什么错的地方希望各路大神指教指教，谢谢！

关于 iframe 在ie11 height:100% 无效的巨坑的更多相关文章

  1. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  2. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  3. 解决body设置height:100%无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

  4. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

  5. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  6. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

  7. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  8. CSS height:100%无效

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/38 浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚 ...

  9. height:100%不起作用（无效），div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

随机推荐

  1. JAVA基础 Exception, Error

    转载请附上本文地址: http://www.cnblogs.com/nextbin/p/6219677.html 本文参考: JAVA源码 http://swiftlet.net/archives/9 ...

  2. 【日记】thinkphp项目阿里云ECS服务器部署

    项目本地开发告一段落.准备上传到服务器上测试 技术组成 thinkphp+mysql+阿里ECS  代码管理方式git 一.阿里ECS服务器配置 1.因为线上已经有几个站点了.所以要配置ngnix多站 ...

  3. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  4. Yii 1开发日记 -- 搜索功能及Checkbox的实现

    用yii 1实现后台的搜索功能,效果如下图: 1.模型中: public function search() { $criteria = new CDbCriteria; //独立高级搜索 if(is ...

  5. Spring + Jedis集成Redis（集群redis数据库）

    前段时间说过单例redis数据库的方法,但是生成环境一般不会使用,基本上都是集群redis数据库,所以这里说说集群redis的代码. 1.pom.xml引入jar <!--Redis--> ...

  6. 让textarea完全显示文章并且不滚动、不可拖拽、不可编辑

    textarea { width: 100%; border: none; outline: none; resize: none; overflow: hidden; padding-bottom: ...

  7. JavaScript获取时间戳、日期格式化

    一. js获取时间戳:   第一种方法: var timestamp1 = Date.parse(new Date());   第二种方法: var timestamp2 = (new Date()) ...

  8. Mysql InnoDB 共享表空间和独立表空间

    前言:学习mysql的时候总是习惯性的和oracle数据库进行比较.在学习mysql InnoDB的存储结构的时候也免不了跟oracle进行比较.Oracle的数据存储有表空间.段.区.块.数据文件: ...

  9. ubuntu下更改鼠标移动速度

    ubuntu下,系统设置中,无法更改外接鼠标的移动指针速度,如图: 然后百度,终于找到一个靠谱打方法: 命令: xset m N 其中,N是速度,估计取值为0-10 该方法比起网上的某些攻略简单好多

  10. 3小时搞定一个简单的MIS系统案例Northwind，有视频、有源代码下载、有真相

    一.瞎扯框架.架构 楼主自从1998年从C语言.MASM.Foxbase开始学计算机开始接触这个行当16年以来,2001年干第一份与程序.软件.然后是各种屌的东西开始,差不多干了13年了,这13年来, ...