「全屏」 <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>

回答

相關問題