Internet Explorer 7的iframe，使高度100％

在一個頁面中，我有一個iframe，我將加載各種東西（一些js，Java小程序）。我想設置其尺寸，以便它始終適合瀏覽器（100％，100％）並且可滾動。不幸的是，100％只適用於寬度，因爲如果我沒有以像素爲單位設置值，我的內容的高度會被垂直壓縮... 我凍結了瀏覽器的滾動條，因爲那些在IE7中的行爲是可怕的。Internet Explorer 7的iframe，使高度100％

我該如何解決這個問題？也許一個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>

來源

2011-12-06 Jerome

簡單的解決辦法：

使用HTML5的doctype如果可能的話：
設定爲100％所有父容器：

*，HTML，身體{ 高度：100 ％; 寬度：100％; margin：0; 填充：0; }

我嘗試避免Javascript修復這類事情，因爲它們只是渲染和佈局問題。

來源

2012-05-22 16:19:53

'min-height'似乎不起作用爲iframes – user2019515

問題是iframe的容器沒有高度，並且iframe本身（如名稱所示）是內聯（框架）。

這意味着，在iframe不能在自己的「生成」的高度，所以你必須在<body>和<html>標籤的高度設置爲100％（也設置了margin和padding爲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. */ 
}

來源

2011-12-06 11:23:21

謝謝！我嘗試並更新了問題，問題仍然存在:( – Jerome

在我無法測試它，因爲我沒有ie7我在哪裏，但嘗試將此添加到iframe：'style =「width：100％; height ：100％; display：block;「' –

這是一個想法，但之前嘗試過，並沒有做到這一點; – Jerome

我發現了一些適用於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(); 
       };

來源

2011-12-06 12:00:52 Jerome

Internet Explorer 7的iframe，使高度100％

回答

相關問題