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