Question

我有一个iframe问题。首先，我在https://stackoverflow.com/search?tab=relevance&q=iframe%20height中搜索关键字iframe height，但我找不到我需要的人。

如何使用100％制作iframe wicth高度而不滚动。滚动身体。

<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>

如果我在iframe中通过http://www.google.com搜索内容，请转到Google搜索结果页面。 iframe将计算新的高度，仍然使用iframe高度100％，身体部分的滚动条。（我希望一些帮助可以完美地工作，不仅在ie和firefox，还有safari和chrome）。非常感谢。

Answer 1

这应该做你想要的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>

    <style type="text/css" media="screen">

        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            padding: 0;
            margin: 0;
        }

        iframe {
            width: 960px;
            height: 100%;
            overflow: hidden;
            border: none;
        }
    </style>

</head>
<body>

    <iframe src="http://google.com" scrolling="no"></iframe>

</body>
</html>

这里的关键是：

将BODY和HTML元素设置为浏览器窗口的100％，这样当你将iFrame设为100％时，它就可以达到100％。
将BODY和HTML元素设置为overflow：hidden以便不显示滚动条
确保没有填充

希望有所帮助

Answer 2

使用我的JQuery插件：

 $.fn.resizeiframe=function(){
    $(this).load(function() {
        $(this).height( $(this).contents().find("body").height() );
    });
    $(this).click(function() {
        $(this).height( $(this).contents().find("body").height() );
    });

}

然后，使用它如下：

$('iframe').resizeiframe();

唐'忘记调整iframe的属性如下：

<iframe
   src="islem.html"
   frameborder="0"
   width="100%"
   marginheight="0"
   marginwidth="0"
   scrolling="no"
></iframe>

Answer 3

我正在寻找相同的效果，我找到了一种方法。如果您在指标部分中使用Chrome（或firebug）中的“检查元素”进行查看，请选择<html>。你应该看看html区域是否小于整个文档。如果你将html设置为高度：300％，它应该工作。以下是重要功能：

html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}

***注意您可能编码的任何最大高度，它会将效果搞定。

在我的情况下，我不得不将框架高度与容器中的另一个元素分开，因此它可以完全拉伸而不会出现滚动条。因此，我必须使用萤火虫计算容器中剩余高度的百分比。

-------另一种方式，更容易：

尽量不为html文档指定任何高度，

html, body {}

然后只编码：

#some-div {height:100%;}
#iframe {height:300%;}

注意：div应该是你的主要部分。

这应该相对有效。 iframe确切地计算了300％的可见窗口高度。如果第二个文档（在iframe中）的html内容的高度小于浏览器高度的3倍，则可以正常工作。如果您不需要经常向该文档添加内容，这是一个永久的解决方案，您可以根据您的内容高度找到您自己的％。

JS - iframe高度为100％且没有滚动（在体内滚动）

3 个答案: