“全屏”<iframe>

当我使用下面的代码来创build一个iframe时:

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

iframe不会一路走下去–10px的白色“边框”围绕iframe。 我怎么能解决这个问题?

这是一个问题的形象:

网站的屏幕截图

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

 body { margin: 0; } 

在与iframe的页面中。

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

 <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; } body { margin: 0; } – 其实这个解决scheme没有必要

我正在成功地使用这个function,还有一个额外的display:none和JS,当用户点击相应的控件时显示它。

您也可以使用视口百分比来达到这个目的:

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> 

不可能说没有看到一个现场的例子,但尝试给两个身体的margin: 0px

尝试添加以下属性:

 scrolling="no" 

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

你可以尝试frameborder=0

使用这个代码而不是:

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