iframe height 100% 问题
最近，利用 MapGuide 技术开发一个 WebGIS 的应用程序，其中用到了 <iframe> 标签；可是当我调试运行的时候，其 width=100% 生效了，但 height=100% 就无效，无论用 JavaScript 的方式修改还是直接设置其 height 属性为100%，始终只有 200px 左右的高度。折腾了我半天，再经过一番研究，终于找到答案了，结论如下：要使 <iframe> 标签的 height=100% 生效，一定要保证其父容器的 height=100% 有效（但我仍然想不通的是，为什么 width=100% 就没问题呢？）。现在举例如下：
在 index.html 中的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe tag test</title>
<style type="text/css">
html, body
{
margin: 0px 0px;
width: 100%;
height: 100%;
}
iframe
{
margin: 0px 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
function iframeHeight() {
document.getElementById('iframeId').height="100%";
}
</script>
</head>
<body>
<iframe id="iframeId" frameborder=0 scrolling=no
src=http://www.google.com />
</body>
</html>
在上述代码中，样式代码部分明确指出了 html, body 的 width 和 height 为 100%，这是必须的，随后指出了 iframe 的 width 和 height 也为 100%，这里的意思是说 iframe 的 width 和 height 是相对于其父容器的 width 和 height 为 100%，这样的方法既简单又明了，IE、Firefox（火狐浏览器）、chrome（Google浏览器）均能顺利通过。希望遇到此问题的同志不要再走弯路！
原文：http://blog.csdn.net/zlxzlxzlxzlxzlx/article/details/5431980
相关推荐
前端项目-Iframe-Height-Jquery-Plugin,该插件可以自动获取iframe的内容并设置iframe的高度。还有跨域修复
<iframe src="show.asp" frameBorder="0" width="500" scrolling="no" height="230"></iframe>
获取iframe子网页的Height，chrome ff ie10 ie9 ie8 ie7都可以通过，其中chrome需要tomcat一下
在Flex中嵌入完整的网页所用到的类， xmlns:flexiframe=...<flexiframe:IFrame id="helpFrame" source="assets/dreamweaver/help/helpHome.html" height="100%" width="100%" overlayDetection="false" />
前端项目-set-iframe-height,跨域响应iframes：自动设置iframe高度以适应iframe内容
这一个月又没更新博客，唉，懒癌又犯了，今天解决了一个问题，关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下： <iframe width="100%" height="100%" name="left" scrolling="auto" ...
iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe> <IFRAME>用于设置文本或图形的浮动图文框或容器。 BORDER <IFRAME BORDER=...
IFRAME病毒木马清除工具 2007.12应网友要求,去掉注释部份
height:280, width:600, bgvisibel:true, title:'iframe弹出层调用', iframe:'http://www.baidu.com' }); 即可弹出一个页面，显示百度。 演示地址： http://www.jsfoot.com/jquery/demo/2012-07-20/701.html
Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> src：文件的路径，既可是HTML文件，也可以是文本、ASP等； width、height："画中画"区域的宽与高； ...
<iframe name="FORMSUBMIT" width="1" height="1" ></iframe> <form action="login.php" method="post" target="FORMSUBMIT" name="form1"> <div class="TxtUser" id="userlogindiv"> 用户名：...
需求: 页面中有一个网页组件... height=100%> </iframe> 网页组件中的代码(ts的部分) ...省略 export class DesignWebInputComponent implements OnInit{ testUrl ; } 此时问题出现了，页面无法显示内容
display:block"><object width="100%" height="100%" id="_5743074417" name="_5743074417" data="/scripts/player/FlexPaperViewer.swf" type="application/x-shockwave-flash">...
Flex页面嵌入jsp文件 flex-iframe1.5.1.zip解压找到flex-iframe-1.5.1\flex-iframe-1.5.1\bin\flex-iframe-1.5.1.swc放入flex...然后在mxml下面写<名字:IFrame source="你要嵌入的页面" width="100%" height="100%"/>
模组：iFrame iFrame模块适用于MagicMirror。 这是将任何Web内容的iFrame添加到的简单方法。 使用模块 要使用此模块，请将其添加到config/config.js文件的modules... height: " 100 px " //Optional. Default: 10
height:100%;overflow: hidden;border:none;margin:0″ > <iframe id=”main_div_warp” src=”<%=basePath%>pages/main.jsp” style=”width:100%;height:100%” frameBorder=”0″></iframe>...
在项目中经常要动态添加iframe，...IFRAME src=bbb.html name=bbb width=100% height=190> </IFRAME> <INPUT type=button value=显示text控件值 onclick=alert(bbb.document.all.txt.value)>
复制代码 代码如下:var iframeHeight = $(“#UpdateUserItem”).contents().find(“body”).height(); 2.设置iframe的高度： $(#UpdateUserItem).height(iframeHeight); 注：UpdateUserItem为iframe的ID； 设置...
<IFrame id="iFrame" source="http://blog.eshangrao.com" width="100%" height="100%" /> <mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true" click="iFrame.visible=cbVisible.selected"/>...
当你在页面上使用了iframe之后，一般来说会不希望iframe显示难看的滚动条，以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling=”no” 属性。但是这样一来如果iframe里面的内容是变化的，高度...