Internet Explorer 7 iframe，使高度为 100%

发布于 2024-12-19 21:49:20 字数 1032 浏览 0 评论 0原文

在一个页面中，我有一个 iframe，我将在其中加载各种内容（一些 js、Java 小程序）。我想设置它的尺寸，以便它始终适合浏览器（100％，100％）并且可以滚动。不幸的是，100%仅适用于宽度，对于高度，如果我不设置以像素为单位的值，我的内容会被垂直挤压...... 我冻结了浏览器的滚动条，因为 IE7 中的滚动条行为非常糟糕。

我该如何解决这个问题？也许 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠檬色的秋千 2024-12-26 21:49:20

最简单的修复：

如果可能，使用 html5 doctype：
在所有父容器上设置 100%：
*, html, 正文 {
高度：100%；
宽度：100%；
保证金：0；
填充：0；
}

修复此类问题，因为它们只是渲染和布局问题。

回复收藏 0 原文

简单气质女生网名 2024-12-26 21:49:20

问题在于 iframe 的容器没有高度，而 iframe 本身，如名称所示，是 inline(frame)。

这意味着 iframe 无法自行“生成”高度，因此您必须将和标记的高度设置为 100 % （同时将它们的边距和填充设置为 0）

或者，在 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. */
}

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 原文

給妳壹絲溫柔 2024-12-26 21:49:20

我发现一些适用于 IE 的 Javascript。唯一的缺点是，您可以看到 iframe 被挤压了一秒钟，然后才再次调整到屏幕大小。称为onload 和onresize。我想我可能会为这两个事件添加一些 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();
                };

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 原文

~没有更多了~