JS - iframe 高度为 100% 且无滚动（正文中的 Scroll-y）
Posted
技术标签:
【中文标题】JS - iframe 高度为 100% 且无滚动（正文中的 Scroll-y）【英文标题】：JS - iframe height with 100% and no scroll (Scroll-y in body) 【发布时间】：2011-08-22 19:24:29 【问题描述】：我遇到了 iframe 问题。首先我在https://***.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%" ></iframe>
如果我在 iframe 中通过 http://www.google.com 搜索某些内容，然后转到 google 搜索结果页面。 iframe 将计算新高度，并且 iframe 高度仍为 100%，即正文部分的滚动条。 （我希望一些帮助不仅可以在 ie 和 firefox 中完美运行，而且在 safari 和 chrome 中也可以完美运行）。非常感谢。
【问题讨论】：
我有点困惑。您想让 iframe 在窗口的整个内容上延伸，但仍可滚动？有什么理由不能只在窗口本身中显示文档内容吗？还是您在这里遗漏了一些重要信息？ 您希望滚动条位于外部文档上，但您希望它控制 iframe？ 【参考方案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"
margin
margin
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 倍，则它可以工作。如果您不需要经常向该文档添加内容，这是一个永久的解决方案，您可以根据内容高度找到自己需要的百分比。
【讨论】：
以上是关于JS - iframe 高度为 100% 且无滚动（正文中的 Scroll-y）的主要内容，如果未能解决你的问题，请参考以下文章