好的,今天公司分配了个解决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. 高可用thrift客户池的实现详解

    最近,公司要求将组内的thrift客户端组件推广至公司内使用.基本的要求如下: 1.高可用 2.集成名称服务,也就配置文件支持服务发现 3.解耦,客户端和高可用组件解耦,简单来说就是,如果以后要切换其 ...

  2. vsftpd:500 OOPS: vsftpd: refusing to run with writable root inside chroot ()错误的解决方法

    ---恢复内容开始--- 最近在安装了vsftpd后 添加了虚拟账户后 新建用户 为新用户创立独立的工作目录 因为虚拟用户在工作目录需要上传文件 所以必须拥有此目录的W权限,但每当给此目录加上W权限后 ...

  3. C#设计模式之原型模式

    原型模式:使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象. 分析: 孙悟空:根据自己的形状复制(克隆)出多个身外身 软件开发:通过复制一个原型对象得到多个与原型对象一模一样的新对 ...

  4. C and SQL data types for ODBC and CLI

    C and SQL data types for ODBC and CLI   This topic lists the C and SQL data types for ODBC and CLI a ...

  5. yii 验证问题

    yii 版本2.08 yii 验证码问题 1.模型里加入'verifyCode', 'captcha','message'=>'error','captchaAction' => 'tes ...

  6. 12.Java中Comparable接口,Readable接口和Iterable接口

    1.Comparable接口 说明:可比较(可排序的) 例子:按照MyClass的y属性进行生序排序 class MyClass implements Comparable<MyClass> ...

  7. 【Cocos2d-x for WP8 学习整理】(5)文字显示全整理

    学习 Cocos2d-x 有一阵了,现在要做个小东西,第一步就遇到了文字展示的问题,于是想把可能遇到的问题统统整理一下.这一部分也不局限于wp8,全平台应该都是一个解决方案. 先在脑袋里大致想了一下, ...

  8. 把office文档转换为html过程中的一些坑

    之前和我们项目的团队一起酝酿了一个项目,公司的业务文档技术文档比较多,但都比较分散,虽然通过FTP或其他方式聚合起来了,但感觉还是不够方便. 另外公司每次都来新员工,新员工都需要一些培训,比较耗时,比 ...

  9. Ubuntu菜鸟入门(八)—— QQ安装

    一.下载 http://www.ubuntukylin.com/application/show.php?lang=cn&id=279 二.安装流程 1.解压,到解压文件夹中运行 sudo d ...

  10. Java 之 常用类(二)

    1.StringBuffer a.StringBuffer 与 String:①StringBuffer是一个全新的类型,与String没有继承关系 ②StringBuffer的出现是为了解决Stri ...