接獲報案,又出現IFrame無法佔滿網頁的問題:

原本以為是小菜一碟,這是五年前就知道的超級老哏,只需加上html,body { height: 100% }立刻藥到病除,檢視原始碼後卻讓我大吃一驚跌坐在地,網頁早就加上height: 100%,莫非茶包又變種了?

排版顯示純文字
<!DOCTYPE html>
<html>
<head>
    <title>Frame Height Issue, AGAIN!</title>
    <style>
    html,body { height: 100%; }
    </style>
</head>
<body>
<form>
<div>Frame Height Issue, AGAIN!</div>
<IFRAME frameborder="0" width="100%" height="90%" 
        src="http://blog.darkthread.net"></IFRAME>
</form>
</body>
</html>

實際個案的網頁比範例複雜很多,而且是ASP.NET內嵌ReportViewer的情境。將ASP.NET網頁存成HTML,用消去法一點一點移去網頁元素,終於在移掉<form>時,<iframe>瞬間由黃子佼變姚明。這才恍然大悟,一直以為<form>是個虛元素不需考量高度,但由測試結果來看卻不然,為<form>也加上style="height: 100%",問題便排除了!

進一步測試,這個問題只出現在IE跟Firefox,Chrome跟Safari不會發生。

【結論】當<iframe>被內嵌於<from>,在IE及Firefox會出現無法佔滿網頁高度的問題,需在<form>加上height: 100% CSS設定。


Comments

# by 毛豆

由 CSS 的眼光來看,子容器的 100% 最大只能和父容器相同。 由於父容器的高度非由設計師指定,所以瀏覽器自行實作。此時子容器就被受限制

# by Wilson

請問Master Page 下要怎麼弄?

# by Jeffrey

to Wilson, 即便套用MasterPage,呈現到前端時仍不外乎HTML跟CSS,先由網頁找出高度受限的來源,再找出其屬於MaterPage或是內容網頁,HTML或Style的修改原理相同。

Post a comment