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). 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>

回答1:

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.

回答2:

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. */
}

回答3:

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();
                };

来源：https://stackoverflow.com/questions/8399048/internet-explorer-7-iframe-make-height-100

标签

javascript

html

iframe

height