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 src="https://example.com" width="100%" height="100%"></iframe> ``` 2. **CSS样式调整**：使用CSS来控制`iframe`的布局。可以使用`max-width`和`max-height`限制`iframe`的最大尺寸，避免内容溢出。...
var iframeHeight = iframeDoc.documentElement.scrollHeight || iframeDoc.body.scrollHeight; ``` 这段代码首先获取了`iframe`元素，然后通过`contentDocument`或`contentWindow.document`获取内部文档，最后利用...
针对这一问题，`前端项目-Iframe-Height-Jquery-Plugin` 提供了一个解决方案。 这个jQuery插件的主要功能是自动检测并设置Iframe的高度，确保内容完整显示，同时解决了跨域通信的问题。跨域问题通常发生在iframe...
`width: 100%`和`height: 100%`确保`<iframe>`填充`<div>`的全部空间。 然而，有时候，即使设置了正确的尺寸，仍然可能遇到iframe内容显示不全的问题。这可能是因为被嵌入页面采用了响应式设计或者有自适应内容，这...
<iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/> ``` 在这个例子中，我们为`body...
本篇文章将围绕提供的代码片段`<iframe src="show.asp" frameBorder="0" width="500" scrolling="no" height="230"></iframe>`展开详细讨论。 ### `<iframe>`标签概述 `<iframe>`（Inline Frame）是HTML中的一个...
<iframe id="conFrame" src="a.html" frameborder="0" scrolling="no" width="100%" height="500px" onload="setIFrameHeight('conFrame');"></iframe> ``` 这里，`id`属性为`"conFrame"`的`<iframe>`在加载完成后...
1. **CSS属性**：`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`，但这种方法通常不足以实现完全自适应，因为浏览器的安全策略会限制跨域访问内容的高度和宽度信息。 2. **JavaScript**：使用...
然而，`iframe`的高度自适应问题是一个常见的挑战，尤其是在内容动态加载或不同浏览器之间存在差异时。 当`iframe`中的内容高度不确定时，我们希望`iframe`能自动调整其高度以完全显示内部内容，避免出现滚动条或者...
<iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.height = myframe.document.body.scrollHeight + 'px';"> </...
本文将详细讲解如何利用IFrame解决这些问题，特别是针对Flex菜单的遮挡问题。 首先，理解Flex和IFrame的基本概念是必要的。Flex是一种基于ActionScript和MXML的开源框架，用于构建富互联网应用程序（RIA）。而...
<iframe id="rightIframe" src="right.html" width="50%" height="100%"></iframe> ``` 在这个示例中，我们有两个并排的iframe，分别加载了`left.html`和`right.html`。 接下来，我们要实现左边的iframe对右边的...
var iframeHeight = iframe.contentDocument.documentElement.offsetHeight; } else if (iframe.contentWindow) { var iframeHeight = iframe.contentWindow.document.documentElement.offsetHeight; } ``` 二...
此外，由于涉及到跨域问题，如果`iframe`加载的页面不在同一域名下，可能会受到浏览器同源策略的限制，无法直接操作iframe内容。这时，可以考虑使用`postMessage`和`message`事件进行父子窗口间的通信，控制遮罩层的...
在iOS和Android平台之间，网页开发常常面临一些兼容性问题，特别是在使用`iframe`元素时。`iframe`，即内联框架，常用于在单一HTML文档中嵌入其他网页内容，实现页面组件的复用。然而，iOS系统对`iframe`的处理方式...
这个问题的原因是，当`iframe`的高度高于其内容的实际高度时，浏览器会使用`iframe`的高度，而当`iframe`的高度小于内容高度时，浏览器会使用内容的实际高度。为了避免这种情况，可以在`iframe`加载时将其高度设置为...
<iframe src="path_to_your_pdf.pdf" width="100%" height="500"></iframe> ``` 这里的`src`属性指向PDF文件的URL，`width`和`height`分别定义了预览区域的尺寸。当用户访问这个页面时，浏览器会尝试在`iframe`中...
<iframe name="read_iframe" align="center" scrolling="no" width="100%" onload="setHeight()" frameborder="0" borderColor="#FFFFFF"></iframe> ``` 这里需要注意的是，由于安全限制，在某些浏览器中`scrolling`...
* 安全性问题：使用 iframe 可能会带来安全性问题，因为 iframe 可以加载恶意代码或攻击用户。 * 性能问题：使用 iframe 可能会影响应用程序的性能，因为 iframe 需要加载外部资源，可能会增加页面加载时间。 因此...
<asp:IFrame ID="iframe1" runat="server" Height="500px" Width="100%"></asp:IFrame> ``` 通过这样的设置，当 UpdatePanel 中的内容发生变化时，iframe 内容也会相应更新，而无需用户感知到页面的完全刷新。 ...