Html 用 iFrame 填充窗口而不显示滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2183936/
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
Fill window with iFrame and not show scrollbars?
提问by Zolomon
How can I make my iframe fill the window and not display any scrollbars?
如何让 iframe 填充窗口而不显示任何滚动条？
This works for IE6, I would like to get it to work for all browsers if possible:
这适用于 IE6，如果可能，我希望它适用于所有浏览器：
<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
回答by Andy E
You should be able to do this using CSS only, without any need for javascript. The following works for me in IE6+, Google Chrome and Safari:
您应该能够仅使用 CSS 来执行此操作，而无需任何 javascript。以下在 IE6+、Google Chrome 和 Safari 中对我有用：
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
<iframe id="iframe1" name="iframe1" frameborder="0"
src="theSiteToShow.html"></iframe>
Your frame margins should be set in the body of theSiteToShow.html.
您的帧边距应设置在theSiteToShow.html.
UPDATE
Following your comment, I used the following as a test page:
更新
根据您的评论，我使用以下内容作为测试页面：
<html>
<head>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body>
</html>
Tested in IE6+, Chrome, Safari and Firefox, it works just fine and fills the entire window.
在 IE6+、Chrome、Safari 和 Firefox 中测试，它工作得很好并且填满了整个窗口。
回答by codeloopy
I was having the same issues with the scroll bars as well as the No Context Menu showing up, even though all these elements had been disabled. After a few days of trying to solve them, I stumbled on this post, which helped a bit, but led me onto finding a post on flexible webplayers with three code examples. Here're the links:
即使所有这些元素都已禁用，我也遇到了与滚动条和无上下文菜单显示相同的问题。在尝试解决这些问题几天后，我偶然发现了这篇文章，这有点帮助，但让我找到了一篇关于灵活网络播放器的文章，其中包含三个代码示例。以下是链接：
http://virtualplayground.d2.pl/?p=367#comment-224
http://virtualplayground.d2.pl/?p=367#comment-224
Use the index file if you want a blank sheet to work from, replace your existing code in your exported .html file (from Unity export), replace the 'unityObject.embedUnity' link with your own link to your .html file located on your server.
如果您想要一个空白工作表，请使用索引文件，替换您导出的 .html 文件中的现有代码（来自 Unity 导出），将“unityObject.embedUnity”链接替换为您自己的 .html 文件链接，位于您的服务器。
To embed the player in your page using an iframe add:
要使用 iframe 添加将播放器嵌入您的页面：
Lock and load.
锁定并加载。
Hope this helps.
希望这可以帮助。
^_^
^_^
