如何製作和iframe像themeforest.com預覽

Question

我該如何使iframe和iframe dom元素使用iframe作爲themeforest.com。 這裏是網站的參考。看看頂部的黑線。整個網站都在它下面加載。

http://themeforest.net/item/focus-simple-one-page-template-2/full_screen_preview/236868 

Answer 1

如果你正在尋找有一個iframe填滿整個網頁，你可以只是簡單的iframe元素的寬度和高度與CSS設置爲100％。

下面是一些示例代碼演示這樣的想法：

HTML

<div id="header"> 
    Header 
</div> 
<iframe src="https://developer.mozilla.org/en/XUL/iframe"> 
</iframe> 

CSS

iframe { 
    width: 100%; 
    height: 100%; 
    padding: 0em; 
    margin: 0em; 
    border: 0em; 
} 

#header { 
    background-color: #00AA00; 
    font-family: sans-serif; 
    text-align: center; 
    line-height: 2em; 
    font-family: bold; 
} 

這段代碼的工作示例位於該JS小提琴：http://jsfiddle.net/mq4Rf/7/。