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>

标签： javascript html iframe height

3条回答

Summer. ? 凉城

2楼-- · 2019-05-23 12:38

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

0人赞添加讨论(0) 举报

Viruses.

3楼-- · 2019-05-23 12:51

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.

0人赞添加讨论(0) 举报

ら.Afraid

4楼-- · 2019-05-23 12:55

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

0人赞添加讨论(0) 举报

Internet Explorer 7 iframe, make height 100%

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间