居中一個iframe？

集中iframe的最佳方式是什麼？居中一個iframe？

您是否預見到過這樣簡單的問題？

<html> 
<body> 

<iframe src="https://abc.123.com/" width="100%" height="100%"></iframe> 



</body> 
</html>

來源

2012-02-02 Ray

這是我的看法：

<html> 
<body> 

<iframe src="https://abc.123.com/" style="border: none; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe> 

</body> 
</html>

你需要這個CSS，以確保100％的高度和寬度，以及無邊距或填充。

body, html { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
}

http://jsfiddle.net/PAmDU/

請記住，這可能會從誰找到前進/後退按鈕改變整個頁面，而不是覆蓋整個頁面的iframe的不一致導致用戶不屑。如果可能的話，最好避免在這些日子裏使用iframe。

來源

2012-02-02 04:22:43

非常感謝，亞蘭。爲什麼iFrames如此看待這些日子？你有關於這個話題的外部鏈接嗎？ – Ray 2012-02-02 04:31:07

http://stackoverflow.com/questions/1081315/why-developers-hate-iframes – 2012-02-02 04:33:04

如果iframe是100％寬度以外的任何東西，這將不會使iframe居中。另外，由於iframe上的邊框，它會留下滾動條。 – Jason 2012-02-02 04:35:38

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

這會工作得很好，但是你仍然會對它一個非常小的灰色邊框。

爲了解決這個問題，在CSS中使用這樣的：

body { 
    margin: 0; 
}

來源

2012-02-02 04:18:08 ionFish

如果你真的想它爲中心和什麼，但100％的寬度，使用這樣的：

<html> 
<body style="margin: 0;"> 
    <div style="margin: 0 auto; width: 500px;"><!--Change this width if you want--> 
     <iframe src="http://www.w3schools.com" style="width: 100%; height: 100%; border: none;"> 
     </iframe> 
    </div> 
</body> 
</html>

我也擺脫了這會導致滾動條的iframe邊框。

來源

2012-02-02 04:30:34 Jason

居中一個iframe？

回答

相關問題