admin管理员组文章数量:1389758
In a page, I have a single iframe in which I will load various things (some js, Java applet). I would like to set its dimensions so that it always fits the browser (100%,100%) and is scrollable. 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.
How would I fix this ? Maybe a Javascript workaround is the only solution ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".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>
In a page, I have a single iframe in which I will load various things (some js, Java applet). I would like to set its dimensions so that it always fits the browser (100%,100%) and is scrollable. 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.
How would I fix this ? Maybe a Javascript workaround is the only solution ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/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 Answers
Reset to default 4Simplest fix:
Use html5 doctype if possible:
Set 100% on all parent containers:
*, html, body { height: 100%; width:100%; margin:0; padding:0; }
I try to avoid Javascript fix for this sort of things as they're simply rendering and layout issues.
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).
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)
Or, using js inside the iframe:
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. */
}
I found some Javascript that works fine for IE. The only drawback is that you can see the iframe squeezed for a second before it gets sized to the screen again. To be called onload and onresize. I guess I might add some Jquery for those two events.
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 posite_master_onLoad(){
posite_master_callAll('_onLoad');
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
resizeIframe();
};
本文标签： javascriptInternet Explorer 7 iframemake height 100Stack Overflow
版权声明：本文标题：javascript - Internet Explorer 7 iframe, make height 100% - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744586426a2614224.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论