Internet Explorer 7 iframe，使高度为100％
[英]Internet Explorer 7 iframe, make height 100%
问题描述
In a page, I have a single iframe in which I will load various things (some js, Java applet). 
在页面中，我只有一个iframe，可以在其中加载各种内容（一些js，Java applet）。 I would like to set its dimensions so that it always fits the browser (100%,100%) and is scrollable. 我想设置其尺寸，使其始终适合浏览器（100％，100％）并且可滚动。 Unfortunately, the 100% only works for the width, for the height my contents are vertically squeezed if I don't set a value in pixels... I have frozen the browser's scrollbars as the behavior of those in IE7 is horrible. 不幸的是，如果不设置像素值，则100％仅适用于宽度，对于我的内容，垂直压缩其高度...由于IE7中的行为令人恐惧，我冻结了浏览器的滚动条。
How would I fix this ? 我该如何解决？ Maybe a Javascript workaround is the only solution ? 也许使用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>
3 个解决方案
解决方案1
4 已采纳 2012-05-22 16:19:53
Simplest fix: 最简单的解决方法：
Use html5 doctype if possible:
尽可能使用html5 doctype： Set 100% on all parent containers:
在所有父容器上设置100％： *, html, body { height: 100%;
*，html，正文{高度：100％； width:100%; 宽度：100％; margin:0; 余量：0; padding:0; 填充：0; } }
I try to avoid Javascript fix for this sort of things as they're simply rendering and layout issues. 我试图避免针对此类问题的Javascript修复，因为它们只是呈现和布局问题。
解决方案2
0 2011-12-06 11:23:21
The problem is that the container of the iframe doesnt have a height, and the iframe itself, as denoted by the name is inline(frame). 问题在于iframe的容器没有高度，而iframe本身（如名称所示）是inline（frame）。
This means, that the iframe cannot "generate" height on its own, so you have to set the height of the <body> and <html> tags to 100% (also set their margin and padding to 0) 这意味着，iframe无法自行“生成”高度，因此您必须将<body>和<html>标记的高度设置为100％（还将其边距和填充设置为0）
Or, using js inside the iframe: 或者，在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. */
}
解决方案3
0 2011-12-06 12:00:52
I found some Javascript that works fine for IE. 我发现一些适用于IE的Javascript。 The only drawback is that you can see the iframe squeezed for a second before it gets sized to the screen again. 唯一的缺点是您可以看到iframe紧压了一秒钟，然后再次调整大小到屏幕上。 To be called onload and onresize . 被称为onload和onresize 。 I guess I might add some Jquery for those two events. 我想我可能会为这两个事件添加一些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();
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.