JS - iframe 高度为 100% 且无滚动（正文中的 Scroll-y）答案

【问题标题】：JS - iframe height with 100% and no scroll (Scroll-y in body)JS - iframe 高度为 100% 且无滚动（正文中的 Scroll-y）
【发布时间】：2011-08-22 19:24:29
【问题描述】：

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

如何制作一个 100% 且无滚动的 iframe 高度。在正文中滚动 Y。

<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 中也可以完美运行）。非常感谢。

【问题讨论】：

我有点困惑。您想让 iframe 在窗口的整个内容上延伸，但仍可滚动？有什么理由不能只在窗口本身中显示文档内容吗？还是您在这里遗漏了一些重要信息？
您希望滚动条位于外部文档上，但您希望它控制 iframe？

标签： javascript iframe height

【解决方案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 以便不显示滚动条
确保没有填充

希望有帮助

【讨论】：

所以……正文没有滚动条。如果我在 iframe 中搜索某些内容，我只能看到前几行结果，我如何看到其余的？
对不起，如果你需要能够垂直滚动正文，只需将溢出：隐藏在正文，html的样式表规则中。
我试过了，不行，iframe height = browser height，所以scroll-y没用:(我认为css已经结束了...

【解决方案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>

【讨论】：

如果请求域外的内容，这很可能会创建一个跨域块。

【解决方案3】：

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

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

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

在我的例子中，我不得不将框架高度与容器中的另一个元素分开，这样它就可以完全伸展而不会出现滚动条。所以我必须使用 firebug 计算容器中剩余高度的百分比。

------- 另一种方式，更简单：

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

html, body {}

然后只编码：

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

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

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

【讨论】：