Html “全屏” <iframe>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3982422/
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
"Full screen" <iframe>
提问by Trufa
When I use the following code to create an iframe:
当我使用以下代码创建 iframe 时：
<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
The iframe doesn't go all the way—a 10px white "border" surrounds the iframe. How could I solve this?
iframe 并没有完全走完——一个 10 像素的白色“边框”围绕着 iframe。我怎么能解决这个问题？
Here is an image of the problem:
这是问题的图像：
采纳答案by kevingessner
The bodyhas a default margin in most browsers. Try:
该body在大多数浏览器默认的保证金。尝试：
body {
margin: 0;
}
in the page with the iframe.
在带有iframe.
回答by Lawrence Dol
To cover the entire viewport, you can use:
要覆盖整个视口，您可以使用：
<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
And be sure to set the framed page's margins to 0, e.g., - Actually, this is not necessary with this solution.body { margin: 0; }.
并确保将框架页面的边距设置为 0，例如，- 实际上，对于此解决方案，这不是必需的。body { margin: 0; }。
I am using this successfully, with an additional display:noneand JS to show it when the user clicks the appropriate control.
我正在成功地使用它，display:none并在用户单击适当的控件时使用附加和 JS 来显示它。
Note: To fill the parent's view area instead of the entire viewport, change position:fixedto position:absolute.
注意：要填充父视图区域而不是整个视口，请更改position:fixed为position:absolute。
回答by Josh Crozier
You can also use viewport-percentage lengthsto achieve this:
您还可以使用视口百分比长度来实现这一点：
5.1.2. Viewport-percentage lengths: the ‘vw', ‘vh', ‘vmin', ‘vmax' units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
5.1.2. 视口百分比长度：“vw”、“vh”、“vmin”、“vmax”单位
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
Where 100vhrepresents the height of the viewport, and likewise 100vwrepresents the width.
其中100vh表示视口的高度，同样100vw表示宽度。
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}<iframe></iframe>This is supported in most modern browsers - support can be found here.
大多数现代浏览器都支持此功能 -可以在此处找到支持。
回答by Hritik
Use frameborder="0". Here's a full example:
使用frameborder="0". 这是一个完整的例子：
<iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>
回答by cmaxtech
Try adding the following attribute:
尝试添加以下属性：
scrolling="no"
回答by Pekka
Impossible to say without seeing a live example, but try giving both bodies margin: 0px
没有看到一个活生生的例子就不可能说，但试着给两个身体 margin: 0px
回答by Newbie
You could try frameborder=0.
你可以试试frameborder=0。
回答by pentexnyx
Adding this to your iframemight resolve the issue:
将此添加到您的iframe可能会解决问题：
frameborder="0" seamless="seamless"
回答by Ohad Cohen
回答by I?Ik ???tEn
Use this code instead of it:
使用此代码代替它：
<frameset rows="100%,*">
<frame src="-------------------------URL-------------------------------">
<noframes>
<body>
Your browser does not support frames. To wiew this page please use supporting browsers.
</body>
</noframes>
</frameset>
