2011-07-15 153 views
6

我玩弄嵌入第二頁的iframe,並在iframe上方顯示一個短頭。爲什麼iframe高度100%在XHTML頁面中不起作用?

在一個測試設置,height="100%"工作正常,而在另一個設置它沒有再I noticed that差異在iframe的高度總是被設置爲大約150像素的的一個文檔是一個XHTML文檔和文件的地方作品沒有設置DOCTYPE。

所以,這個工作:(高度完全縮放到窗口)

<html> 
<head> </head> 
<body> 
<h1>Wrapper Header ...</h1> 
<hr/> 
<iframe src="/jenkins" width="100%" height="100%"> 
    <p>iframes not suppoerted</p> 
</iframe> 
</body> 
</html> 

(高度約150像素左右)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> </head> 
<body> 
<h1>Wrapper Header ...</h1> 
<hr/> 
<iframe src="/jenkins" width="100%" height="100%"> 
    <p>iframes not suppoerted</p> 
</iframe> 
</body> 
</html> 

顯示在IE8相同和FF5。

爲什麼是否它的高度百分比不再有效,如果我有XHTML文檔類型?

回答

13

因爲頁面在標準模式下使用有效的DTD呈現。它在其他模式下工作的原因是因爲它處於怪癖模式。

它在怪癖模式下工作的原因是因爲瀏覽器在過去非常寬鬆並且不嚴格,因此人們在過去沒有在html/body上指定高度的情況下做了height="100%"

現在正確的做法是在html/body上設置高度。嘗試類似html, body { height:100%; }

iframe可能也需要是直接的孩子才能發生這種情況。或者,你可以定位它絕對/固定。

+0

感謝您提及的HTML /身高的事情。 –

+1

但是,您是否需要設置包含「iframe」的頁面的html/body高度或在其中加載的頁面? –

+0

身高100%無法正常工作,但在iframe上使用絕對位置對我有效。謝謝! –