Internet Explorer 7 iframe, make height 100%
Question
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.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 answers
solution1
4 ACCPTED 2012-05-22 16:19:53
Simplest 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.
solution2
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).
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. */
}
solution3
0 2011-12-06 12:00:52
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 composite_master_onLoad(){
composite_master_callAll('_onLoad');
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
resizeIframe();
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.