iframe高度100%无效（怎么让iframe自适应浏览器的高度和宽度）
本文目录
- 怎么让iframe自适应浏览器的高度和宽度
- iphone下iframe问题记录
- 64位WIN7中IE8/11出现iframe标签高度100%无效问题
- iframe height百分百无效，怎么解决
- 用js控制的iframe自适应高度为什么在webkit内核浏览器中会失效
- iframe中div的高度设置为100%之后为div只是填满了外部浏览器而内部的iframe没有填满
怎么让iframe自适应浏览器的高度和宽度
1、在文件夹里创建两个html文件，一个“index”一个“iframe”。
2、在index中添加一个iframe标签，直接嵌入iframe页面。
3、在iframe网页中添加了两个固定高度的div内容。
4、浏览器打开index页面我们发现iframe部分有滚动条，需要滚动显示页面。
5、现在我们在index页面的iframe标签再添加如下的属性。
6、再次打开index页面iframe已经高度自适应了。
iphone下iframe问题记录
iframe在手机上展示正好一屏的内容，横向100%，纵向高度固定（例如500px）超出可滚动。
这些问题在Mac上、window上、Android上都是没有的。
这两个问题需要一起说
关于实现滚动
百度一下可以看到很多了
关于宽度溢出
本质是iOS手机内，iframe内页面 display:none 隐藏掉的元素宽度会依然计算在内（文章最后再给个demo吧）。
解决方案：
(1) 对于子页面不可控的情况下 最简单的解决办法
给iframe加上属性 scrolling="no"
页面会自动变得规规矩矩，虽然有 scrolling="no" 属性，在电脑上模拟会无法滑动，但是在iOS手机上会全部铺满，Y轴上可以依赖上面提到的父节点的属性进行滚动。
(2) 子页面可控 操作子页面
方法一：html加属性 width:100vw; ， 注意给html和body加属性width:100%无效....
方法二：html加属性 width: 1px;min-width: 100%;
子页面不可控的情况下，无解。
可控的情况下，以下面这种布局来写子页面，子页面body下的全部内容全部包裹在#wrap这个dom中。用dom的滚动代替body的滚动。iOS手机下会认为子页面无尺寸。
子页面：
父页面：
在Mac（Chrome）上和Android上一切正常，使用iphone打开，会发现横向边界被截断了。
如果改为 overflow-x: scroll; 会发现横向可滑动的距离非常长。通过使用Mac Safari调试iphone可见
iframe内页面超出隐藏overflow:hidden元素的宽度也被计算在内了
64位WIN7中IE8/11出现iframe标签高度100%无效问题
看你写的觉的不仅仅是ie8/11的问题 应该所有的浏览器都有问题用js把 获取高度把高度在赋给框架 这样不仅能解决ie8/11的问题 还能解决ie6/7 的问题
iframe height百分百无效，怎么解决
在这个地方加条style="height:500px;"试试
你外层的div没有高度吧
用js控制的iframe自适应高度为什么在webkit内核浏览器中会失效
《iframe src="map/ch.html" id="ifrm" name="ifrm" width="100%" height="100%" frameborder="0" scrolling="no" onload="document.all(’ifrm’).style.height=ifrm.document.body.scrollHeight+30;"》《/iframe》 外层div也设置成宽高100% iframe里的容器同样也是
iframe中div的高度设置为100%之后为div只是填满了外部浏览器而内部的iframe没有填满
这是填不了的，，，
有一个解决办法，，，，
JS在iframe里取得高度，返回上层页面取得，再定义iframe的高度
这个解决办法网上有，，你搜索一下，，有一些做法不太一样，，，你看看哪一个合适用哪个，
你搜索iframe 自适应高度，，，，应该可以搜索到。
