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，body { 身高：100％; 宽度：100％; 余量：0; 填充：0; }

我尽量避免对这类事情进行Javascript修复，因为它们只是渲染和布局问题。

Answer 2

问题是iframe的容器没有高度，而iframe本身，如名称所示是内联（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 个答案: