Javascript Internet Explorer 7 iframe，使高度达到100%_Javascript_Html_Iframe_Height

Javascript Internet Explorer 7 iframe，使高度达到100%

javascript html iframe

Javascript Internet Explorer 7 iframe，使高度达到100%,javascript,html,iframe,height,Javascript,Html,Iframe,Height,在一个页面中，我有一个iframe，我将在其中加载各种内容（一些js、javaapplet）。我想设置它的尺寸，使其始终适合浏览器（100%，100%），并可滚动。不幸的是，100%只适用于宽度，对于高度，如果我不设置像素值，我的内容会垂直压缩。。。我已经冻结了浏览器的滚动条，因为IE7中的滚动条行为非常可怕我该如何解决这个问题？也许Javascript解决方案是唯一的解决方案 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

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


正文{
溢出：隐藏；
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
html{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}

问题在于iframe的容器没有高度，而iframe本身（由名称表示）是内联的（frame）

这意味着iframe无法自行“生成”高度，因此必须将

和

标记的高度设置为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. */
}

我发现一些Javascript可以很好地应用于IE。唯一的缺点是，在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();
                };

最简单的解决方案：

如果可能，请使用html5 doctype：

在所有父容器上设置100%：

*，html，正文{ 身高：100%；宽度：100%；保证金：0；填充：0； }

我尽量避免使用Javascript修复这类问题，因为它们只是渲染和布局问题。

谢谢！我尝试并更新了这个问题，但问题依然存在：（当时我无法测试它，因为我现在没有ie7，但尝试将它添加到iframe:

style=“width:100%；height:100%；display:block；”

这是一个想法，但以前尝试过，没有效果；）