Internet Explorer 7 iframe，使高度为100％

Question

在页面中，我只有一个iframe，可以在其中加载各种内容（一些js，Java applet）。 我想设置其尺寸，使其始终适合浏览器（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>

Answer 1

最简单的解决方法：

尽可能使用html5 doctype：
在所有父容器上设置100％：
*，html，正文{高度：100％； 宽度：100％; 余量：0; 填充：0; }

我试图避免针对此类问题的Javascript修复，因为它们只是呈现和布局问题。

Answer 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. */
}

Answer 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％

问题描述

3 个解决方案

解决方案1
4 已采纳 2012-05-22 16:19:53

解决方案2
0 2011-12-06 11:23:21

解决方案3
0 2011-12-06 12:00:52

Internet Explorer 7 iframe，使高度为100％

问题描述

3 个解决方案

解决方案1 4 已采纳 2012-05-22 16:19:53

解决方案2 0 2011-12-06 11:23:21

解决方案3 0 2011-12-06 12:00:52

解决方案1
4 已采纳 2012-05-22 16:19:53

解决方案2
0 2011-12-06 11:23:21

解决方案3
0 2011-12-06 12:00:52