最近，利用 MapGuide 技术开发一个 WebGIS 的应用程序，其中用到了 <iframe> 标签；可是当我调试运行的时候，其 width=100% 生效了，但 height=100% 就无效，无论用 JavaScript 的方式修改还是直接设置其 height 属性为100%，始终只有 200px 左右的高度。折腾了我半天，再经过一番研究，终于找到答案了，结论如下：要使 <iframe> 标签的 height=100% 生效，一定要保证其父容器的 height=100% 有效（但我仍然想不通的是，为什么 width=100% 就没问题呢？）。现在举例如下：

在 index.html 中的代码如下：

`01`	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

`02`	`<html` `xmlns="http://www.w3.org/1999/xhtml">`

03 <head>

`04`	`<title>iframe tag test</title>`

`05`	`<style` `type="text/css">`

`06`	`html, body`

07 {

`08`	`margin: 0px 0px;`

`09`	`width: 100%;`

`10`	`height: 100%;`

11 }

12 iframe

13 {

`14`	`margin: 0px 0px;`

`15`	`width: 100%;`

`16`	`height: 100%;`

17 }

`18`	`</style>`

19

`20`	`<script` `type="text/javascript">`

`21`	`function iframeHeight() {`

`22`	`document.getElementById('iframeId').height="100%";`

23 }

`24`	`</script>`

25

26 </head>

27 <body>

`28`	`<iframe` `id="iframeId"` `frameborder=0` `scrolling=no`

`29`	`src=http://www.google.com />`

30 </body>

31 </html>

在上述代码中，样式代码部分明确指出了 html, body 的 width 和 height 为 100%，这是必须的，随后指出了 iframe 的 width 和 height 也为 100%，这里的意思是说 iframe 的 width 和 height 是相对于其父容器的 width 和 height 为 100%，这样的方法既简单又明了，IE、Firefox（火狐浏览器）、chrome（Google浏览器）均能顺利通过。希望遇到此问题的同志不要再走弯路！

转自：http://blog.baiwand.com/?post=3

iframe height 100% 无效问题解决（转）相关推荐

CSS子元素撑满父元素（height: 100%无效）
原因分析明确一点:子元素设置height: 100%需要父元素有确定的高度: 如果父元素高度是被子元素②撑起来的,此时我们想让子元素①撑满高度,height: 100%无效. 解决办法父元素: p ...
vue中设置height:100%无效的问题及解决方法
在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效,在App.vue中:<template><div id=" ...
html height 100%无效,css height:100%撑不起来怎么解决？
css height:100%撑不起来怎么解决?下面本篇文章居来给大家介绍一下解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css height:100%撑不起来的解决方 ...
CSS height:100%无效
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/38 浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚 ...
css设置height无效,CSS中设置height:100%无效的解决方案
li 前面的缩进怎么去除? 异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 设置margin和padding为0或者为比较小的值就 ...
设置div table 等元素高度宽度百分之一百 100% 无效解决办法...
很多人都遇到这个问题,却不得而解需要当前元素的父元素height width 指定了一个数值或者百分比还有就是在有的浏览器的 body html元素height width 为0,body子元素指 ...
[css] 如何解决html设置height：100%无效的问题？
[css] 如何解决html设置height:100%无效的问题? 在外层包一个给定高度的 div 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
uniapp height高度 100% 无效的问题
错误示例 <template><view class="test">111</view> </template><style ...
div高度、宽度100% div width、height 100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...

iframe height 100% 无效问题解决（转）

iframe height 100% 无效问题解决（转）相关推荐

最新文章

热门文章