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％

回答

相关问题