“全屏” <iframe>

108

当我使用下面的代码来创建一个iframe：“全屏” <iframe>

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

iframe的不走一路-10px的白色“边境”围绕iframe中。我怎么能解决这个问题？

这是问题的一个形象：

Screenshot of site

来源

2010-10-20 Trufa

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

body { 
    margin: 0; 
}

页面中的iframe。

来源

2010-10-20 21:32:16 kevingessner

完美！像魅力一样工作！非常感谢你！！ – Trufa 2010-10-20 21:35:01

谷歌搜索“重置CSS” – 2012-11-02 12:31:50

没有在铬上工作 – AlexVPerl 2015-03-25 21:21:22

不可能说没有看到一个活生生的例子，但尝试给这两个机构margin: 0px

来源

2010-10-20 21:23:11

请看看我的编辑，谢谢！ – Trufa 2010-10-20 21:30:28

@Trufa它可能是保证金，但它也可能是别的。最佳使用Firebug的“布局”视图来找出 – 2010-10-20 21:32:11

非常感谢你佩卡！反正@kevingessner钉了它！ – Trufa 2010-10-20 21:37:54

你可以尝试frameborder=0。

来源

2010-10-20 21:27:04 Newbie

谢谢，但这是“内部框架”我需要修改外部（我不知道，直到@kevingessner答案）谢谢你！ – Trufa 2010-10-20 21:38:48

尝试添加以下属性：

scrolling="no"

来源

2012-05-16 13:21:33 cmaxtech

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

来源

2012-07-22 09:56:10 Hritik

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

来源

2012-12-03 22:21:01

不再支持HTML5 – 2013-03-13 06:54:32

187

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

<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; 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，当用户点击相应的控件时显示它。

来源

2013-02-06 20:59:27

+22

该答案解决了如何使iframe占据整个屏幕 – 2013-10-06 04:24:14

您也可以使用[视口百分比长度]（http：// stackoverflow。 com/a/27832759/2680216）.. – 2015-01-13 05:22:24

接受的答案对我无效。这样做了。谢谢。 – AlexVPerl 2015-03-25 21:21:39

还可以使用viewport-percentage lengths来实现这一点：

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

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

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

Example Here

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>

这是支持大多数流行的浏览器 - support can be found here。

来源

2015-01-08 04:07:11

这里的权利是金子！ – 2015-09-25 15:12:16

“全屏” <iframe>

回答

相关问题