好的，今天公司分配了个解决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. C#网络编程数据传输中封装数据帧头的方法

    在C/S端编程的时候,经常要在C端和S端之间传数据时自定义一下报文的帧头,如果是在C/C++,封装帧头是一件很简单的事情,直接把unsigned char *强转为struct就行,但是在C#中,并没 ...

  2. nginx负载均衡集群

    nginx负载均衡集群  0.前言:nginx 负载均衡,属于网络7层模型中的应用层,说白了就是一个代理,要用 upstrem 模块实现,代理则用proxy模块 1.可以针对域名做转发,lvs只能针对 ...

  3. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  4. Ionic 常用插件

    ionic扩展插件 1.ionic-timepicker 时间选择 https://github.com/rajeshwarpatlolla/ionic-timepicker   2.ionic-da ...

  5. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  6. unity播放视频

    方法一: 1.用一个Quad(或者其他的)做屏幕,调整摄像机位置和它的大小,使它显示在你想要的区域 2.将视频拖入Unity,拖入,拖入,拖入:不是将视频直接copy到指定的文件夹中 3.将下面脚本挂 ...

  7. AngularJS 包含

    在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中,目前还不支持包含 HTML 文件的功能. 大多服务端脚本都支持包含文件功能 (SSI: Server Sid ...

  8. 转 centos虚拟机环境的构建。

    转自:http://www.cnblogs.com/xiaoluo501395377/archive/2013/03/31/CentOs.html 一.前言 作为一个想从事j2ee后台开发的程序猿,l ...

  9. Eclipse下配置javaweb项目快速部署到tomcat

    用惯了VS,再用Eclipse,完全有一种从自动挡到手动挡的感觉啊. 很多同学在Eclipse下开发web项目,每一次修改代码,看效果的时候都有右键项目->Run as -> Run on ...

  10. 听大神说：https和http有何区别？（转）

    在做雅虎的时候,发现用第三方工具截取不到客户端与服务端的通讯,以前重来没碰到过这种情况,仔细看了看,它的url请求时基于https的,gg了下发现原来https协议和http有着很大的区别.总的来说, ...