在HTML5中伸展iframe

我有兩個html文件，一個包含另一個iframe，並且我想讓這個iframe伸展到父html的整個高度。在HTML5中伸展iframe

所以第一個HTML文件（其中有一個紅色背景）看起來像：

<!DOCTYPE html> 
<html> 
<body style="background-color: red; margin: 0px; padding: 0px;"> 
    <iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" /> 
</body> 
</html>

第二個（其中有一個藍色背景）：

<!DOCTYPE html> 
<html>  
<body style="background-color: blue;" /> 
</html>

如果所有的事情都是正確的我期待只能看到一個藍色背景，因爲iframe應該與整個父頁面重疊，但我只看到一條藍色和一大堆紅色。

使用HTML5文檔類型<!DOCTYPE html>我似乎無法越來越正確的結果：

With HTML5 DOCTYPE

如果我刪除了HTML5的doctype我得到我想要的結果。我想這是因爲它會在怪癖模式呈現HTML：

Without HTML5 DOCTYPE

我想要的HTML文檔類型的，所以我怎麼能解決這個問題？感謝您的期待！

來源

2011-08-10 Arcturus

我做了我的[W3瀏覽器（http://w3viewer.com ）。訣竅是將IFRAME放入DIV中。然後絕對定位DIV，以覆蓋整個頁面，並設置寬度：100％。身高：100％;在IFRAME上。 –

CSS：

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; } 
#iframe { display: block; width:100%; height:100%; }

HTML：

<div id="wrap"> 
    <iframe src="..." frameborder="0" id="iframe"></iframe> 
</div>

現場演示：http://jsfiddle.net/5G5rE/show/

來源

2011-08-10 13:39:44

您能否解釋爲什麼會出現這個問題，以及position：fixed如何解決問題？謝謝！ – Jay

@Jay OP已經將IFRAME的高度設置爲100％。這個百分比是關於包含塊 - 在這種情況下是BODY元素。但是，默認情況下，BODY元素的高度取決於其內容的高度。這是一個循環依賴 - BODY的高度取決於IFRAME的高度，反之亦然。顯然這不起作用。人們可以將BODY和HTML元素的高度都設置爲100％ - 這是可行的。我更喜歡固定定位 - 它更靈活（可以精確定義位置和尺寸）。 –

謝謝ŠimeVidas的解釋！ – Jay

在HTML5中伸展iframe

回答

相關問題