Question

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

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

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

以下是问题的图片：

Screenshot of site

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

您还可以使用viewport-percentage lengths来实现此目标：

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

其中100vh表示视口的高度，同样100vw表示宽度。

Example Here

＆＃13;

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

＆＃13;

<iframe></iframe>

＆＃13;

大多数现代浏览器都支持此功能 - support can be found here。

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

尝试添加以下属性：

scrolling="no"

Answer 6

不可能在没有看到实例的情况下说，但尝试给出两个身体margin: 0px

Answer 7

你可以使用这段代码：

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

您可以尝试frameborder=0。

Answer 9

将此添加到您的 iframe 可能会解决该问题：

frameborder="0"  seamless="seamless"

Answer 10

我创建了一个gist模板，结合了上面的一些答案。

Answer 11

使用此代码代替它：

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

“全屏”<iframe> </iframe>

11 个答案: