Internet Explorer 7 iframe，使高度 100%答案

【问题标题】：Internet Explorer 7 iframe, make height 100%Internet Explorer 7 iframe，使高度 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" width="100%" height="100%" id="contentFrame" src="..."></iframe>
</body>
</html>

【问题讨论】：

标签： javascript html iframe height

【解决方案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();
                };

【讨论】：