关于 iframe 在ie11 height:100% 无效的巨坑
好的,今天公司分配了个解决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% 无效的巨坑的更多相关文章
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- 解决body设置height:100%无效问题
1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...
- html中设置height=100%无效的问题
设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素 height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...
- table布局 height=100%无效分析
(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...
- IE6 CSS高度height:100% 无效解决方法总结
原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html 上面红色部分为 height:100%; 自动拉 ...
- CSS中设置height:100%无效的解决方案
在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...
- CSS height:100%无效
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/38 浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚 ...
- height:100%不起作用(无效),div全屏
当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...
随机推荐
- ios常用的第三方库
ios开发中有可能用到的第三方库进行记录一下: 注:资料信息来源于网络 自己整理 https://developer.apple.com/reference(苹果官方文档) https://gith ...
- [Android Pro] Android异步任务处理之AsyncTaskLoader的使用
reference to : http://blog.csdn.net/happy_horse/article/details/51518280 最近项目中涉及到加载本地的地名.db文件,数据量大,自 ...
- C#中的匿名方法
C#中的匿名方法是在C#2.0引入的,它终结了C#2.0之前版本声明委托的唯一方法是使用命名方法的时代.虽然在 C# 3.0 及更高版本中,Lambda 表达式取代了匿名方法,作为编写内联代码的首选方 ...
- myeclipse一直卡在loading workbench解决方法
删除工作空间下.metadata中的org.eclipse.ui.workbench org.eclipse.ui.workbench.texteditor
- Redis到底该如何利用(三)?
上两篇受益匪浅,秉着趁热打铁,不挖到最深不罢休的精神,我决定追加这篇.上一篇里最后我有提到实现分级缓存管理应该是个可行的方案,因此今天特别实践了一下.不过缓存分级之后也发现了一些问题,例如下图: 当a ...
- fullPage.js学习笔记
中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看 ...
- 各大IT技术博客排行榜
cnblogs 积分排名前3000名 http://www.cnblogs.com/ 左侧有推荐博客排行 cppblog http://www.cppblog.com/AllBloggers.aspx ...
- 【vuejs小项目——vuejs2.0版本】组件化的开发方式
对于多张页面需要里存在相同模块,可以进行组建化的开发模式. 例如:此处需要一个评分标准组件,创建一个components/star/star.vue. 在需要引入该组建的页面上 import进去< ...
- docker 1.8+之后ubuntu安装指定版本docker-engine
这边记录ubuntu安装过程,首先是官网文档 If you haven’t already done so, log into your Ubuntu instance. Open a termina ...
- 测试...外部指针访问private
#include<iostream> using namespace std; class A{ public: int* getPointer(){ return &m; } v ...