“全屏” <iframe>

163

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

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

iframe不能完全解决问题-iframe周围有10像素的白色“边框”。我该如何解决？

这是问题的图像：

网站截图

html iframe

— 特鲁法
source

103

body在大多数浏览器中，都有默认边距。尝试：

body {
    margin: 0;
}

在带有的页面中iframe。

— 凯文斯纳
source

300

要覆盖整个视口，可以使用：

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

— 劳伦斯·多尔
source

31

这个答案解决了如何使iframe占据整个屏幕

— 马可·马

您还可以使用视口百分比长度 ..

— Josh Crozier 2015年

2

接受的答案对我不起作用。做到了。谢谢。

— AlexVPerl 2015年

2

好答案！简单，跨浏览器且确定。

— Blankip

与HTML 5完美搭配

— -break7533

39

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

5.1.2。视口百分比长度：“ vw”，“ vh”，“ vmin”，“ vmax”单位

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

其中，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>

展开摘要

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

— 乔什·克罗齐耶（Josh Crozier）
source

8

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

— Hritik
source

7

尝试添加以下属性：

scrolling="no"

— 科技
source

5

无法说，但看不到现场实例，但请尝试给两个身体 margin: 0px

— 佩卡
source

@Trufa可能是利润，但也可能是其他。最好使用Firebug的“布局”视图找出

— 佩卡·

2

你可以试试看frameborder=0。

— 新手
source

谢谢，但是那是“在iframe内部”，我需要修改外部（直到@kevingessner回答，我才知道），谢谢！

— Trufa

2

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

frameborder="0"  seamless="seamless"

— 戊ny
source

1

@FABBRj太好了，我可以帮助您：D

— pentexnyx

0

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

— 奥哈德·科恩
source

-2

使用以下代码代替它：

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

— 伊斯基克语
source

7

HTML5不再支持

— Hari Karam Singh