Internet Explorer 7 iframe，使高度 100%
Posted
技术标签:
【中文标题】Internet Explorer 7 iframe，使高度 100%【英文标题】：Internet Explorer 7 iframe, make height 100% 【发布时间】：2012-01-14 00:05:53 【问题描述】：在一个页面中，我有一个 iframe，我将在其中加载各种内容（一些 js、Java 小程序）。我想设置它的尺寸，使其始终适合浏览器（100%，100%）并且可以滚动。不幸的是，100% 只适用于宽度，如果我没有设置像素值，我的内容会被垂直挤压...... 我已经冻结了浏览器的滚动条，因为 IE7 中的滚动条非常糟糕。
我将如何解决这个问题？也许 javascript 解决方法是唯一的解决方案？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body
overflow:hidden;
height:100%;
width:100%;
padding:0;
margin:0;
html
height:100%;
width:100%;
padding:0;
margin:0;
</style>
</head>
<body onload="onLoad()" onunload="onUnload()">
<iframe name="contentFrame" id="contentFrame" src="..."></iframe>
</body>
</html>
【问题讨论】：
【参考方案1】：最简单的修复：
尽可能使用 html5 文档类型：
在所有父容器上设置 100%：
*, html, 正文 高度：100%； 宽度：100%； 边距：0； 填充：0；
我尽量避免对这类事情进行 Javascript 修复，因为它们只是呈现和布局问题。
【讨论】：
【参考方案2】：问题是 iframe 的容器没有高度，而 iframe 本身，如名称所示是 inline(frame)。
这意味着，iframe 无法自行“生成”高度，因此您必须将 <body> 和 <html> 标记的高度设置为 100%（同时将它们的边距和填充设置为 0）
或者，在 iframe 中使用 js：
function resizeIframe(iframeID)
if(self==parent) return false; /* Checks that page is in iframe. */
else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/
var FramePageHeight = framePage.scrollHeight + 10; /* framePage
is the ID of the framed page's BODY tag. The added 10 pixels prevent an
unnecessary scrollbar. */
parent.document.getElementById(iframeID).style.height=FramePageHeight;
/* "iframeID" is the ID of the inline frame in the parent page. */
【讨论】：
谢谢！我尝试并更新了问题，问题仍然存在:( 目前我无法测试它，因为我没有 ie7，但尝试将其添加到 iframe：style="width:100%; height:100%; display:block;"
这是一个想法，但之前尝试过，但没有成功；）【参考方案3】：
我发现了一些适用于 IE 的 Javascript。唯一的缺点是您可以看到 iframe 在再次调整到屏幕大小之前会被挤压一秒钟。被称为onload 和onresize。我想我可能会为这两个事件添加一些 Jquery。
function resizeIframe()
var height = document.documentElement.clientHeight;
height -= document.getElementById('contentFrame').offsetTop;
// not sure how to get this dynamically
height -= 0; /* whatever you set your body bottom margin/padding to be */
document.getElementById('contentFrame').style.height = height +"px";
;
function composite_master_onLoad()
composite_master_callAll('_onLoad');
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
resizeIframe();
;
【讨论】：
以上是关于Internet Explorer 7 iframe，使高度 100%的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer 和非常奇怪的 iFrame 行为案例
Internet Explorer 中带有 innerHTML 的 JavaScript iframe 设置
Internet Explorer 中的 Iframe 内不显示模态弹出窗口
`base` 标记使 iframe 在 Internet Explorer 中作为新窗口打开