Javascript JS - iframe 高度为 100% 且无滚动（主体中的 Scroll-y）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5956208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS - iframe height with 100% and no scroll (Scroll-y in body)
提问by cj333
I have an iframe problem. firstly I search the keyword iframe heightin https://stackoverflow.com/search?tab=relevance&q=iframe%20heightbut I did not find someone I need.
我有一个 iframe 问题。首先我iframe height在https://stackoverflow.com/search?tab=relevance&q=iframe%20height 中搜索关键字， 但我没有找到我需要的人。
How to make an iframe wicth height with 100% and no scroll. Scroll-y in body.
如何制作具有 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>
And if I search something via http://www.google.comin the iframe, after turn to the google search result page. the iframe will calculate the new height and still with iframe height 100%, the scroll bar in the body part. (I wish some help could work perfect not only in ie and firefox, but also in safari and chrome ). Thanks a lot.
如果我在 iframe 中通过http://www.google.com搜索某些内容，则转到 google 搜索结果页面。iframe 将计算新的高度，并且仍然使用 iframe 高度 100%，即正文部分中的滚动条。（我希望一些帮助不仅可以在 ie 和 firefox 中完美运行，而且可以在 safari 和 chrome 中完美运行）。非常感谢。
回答by Jesse Bunch
This should do what you're looking for:
这应该做你正在寻找的：
<!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>
The keys here are to:
这里的关键是：
- Make the BODY and HTML elements 100% of the browser window so when you make the iFrame 100%, it has something to be 100% of.
- Set the BODY and HTML elements to overflow:hidden so that no scrollbars are shown
- Make sure there is no padding
- 使 BODY 和 HTML 元素成为浏览器窗口的 100%，这样当您将 iFrame 设为 100% 时，它就有一些东西是 100% 的。
- 将 BODY 和 HTML 元素设置为 overflow:hidden 以便不显示滚动条
- 确保没有填充
Hope that helps
希望有帮助
回答by Abdennour TOUMI
Use my JQuery Plugin :
使用我的 JQuery 插件：
$.fn.resizeiframe=function(){
$(this).load(function() {
$(this).height( $(this).contents().find("body").height() );
});
$(this).click(function() {
$(this).height( $(this).contents().find("body").height() );
});
}
then , use it as following :
然后，按如下方式使用它：
$('iframe').resizeiframe();
Don' forget to adjust attributes of iframeas following :
不要忘记调整iframe以下属性：
<iframe
src="islem.html"
frameborder="0"
width="100%"
marginheight="0"
marginwidth="0"
scrolling="no"
></iframe>
回答by pixelfe
I was searching for the same effect and I found a way. If you look with 'examine element' in Chrome (or firebug) in the metrics section, then select the <html>. You should see if the html area is smaller than the whole document. If you set the html at height: 300%, it should work. Here are the important features:
我正在寻找相同的效果，我找到了一种方法。如果您在指标部分的 Chrome（或萤火虫）中查看“检查元素”，则选择 <html>. 您应该查看 html 区域是否小于整个文档。如果您将 html 设置为 height: 300%，它应该可以工作。以下是重要的功能：
html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}
***watch for any max-height you might have coded, it would screw the effect up.
***注意您可能已编码的任何最大高度，它会破坏效果。
In my case, I had to split the frame height with another element in my container, so it could fully strech without scrollbars appearing. So I had to calculate the % of height remaining in my container, using firebug.
就我而言，我不得不将框架高度与容器中的另一个元素分开，这样它就可以完全拉伸而不会出现滚动条。所以我必须使用萤火虫计算容器中剩余高度的百分比。
------- Another way, easier:
-------另一种方式，更简单：
Try not specifying any height for BOTH your html documents,
尽量不要为您的 html 文档指定任何高度，
html, body {}
then only code this:
然后只编码这个：
#some-div {height:100%;}
#iframe {height:300%;}
note: the div should be your main section.
注意：div 应该是您的主要部分。
This should relatively work. the iframe does exactly calcultes 300% of the visible window height. If you html content from the 2nd document (in the iframe) is smaller in height than 3 times your browser height, it work. If you don't need to add content frequently to that document this is a permanent solution and you could just find your own % needed according to your content height.
这应该相对有效。iframe 确实计算了可见窗口高度的 300%。如果您来自第二个文档（在 iframe 中）的 html 内容的高度小于浏览器高度的 3 倍，则它可以工作。如果您不需要经常向该文档添加内容，这是一个永久的解决方案，您可以根据您的内容高度找到自己所需的 %。
