"全屏"<iframe>

Question

当我使用以下代码创建iframe时:

<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

iframe并没有完全消失 - 围绕iframe的10px白色"边框".我该怎么解决这个问题？

这是问题的图像:

Answer 1

要覆盖整个视口,您可以使用:

<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>

并确保将框架页面的边距设置为0,例如body { margin: 0; }. - 实际上,这个解决方案不需要这样做.

我成功地使用了这个,display:none并在用户单击适当的控件时使用另外的JS来显示它.

注意:要填充父视图区域而不是整个视口,请更改position:fixed为position:absolute.

Answer 2

该body在大多数浏览器默认的保证金.尝试:

body {
    margin: 0;
}

在页面中iframe.

Answer 3

您还可以使用视口百分比长度来实现此目的:

5.1.2.视口百分比长度:'vw','vh','vmin','vmax'单位

视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.

Where 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>

大多数现代浏览器都支持此功能 - 可在此处找到支持.

Answer 4

使用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>

Answer 5

您可以使用这段代码：

  <iframe src="http://example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0%;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>

Answer 6

尝试添加以下属性:

scrolling="no"

Answer 7

如果没有看到一个实例,就不可能说,但试着给两个身体 margin: 0px