【茶包射手日記】長不高的IFrame

接獲報案,又出現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設定。

歡迎推文分享:
Published 18 May 2013 01:50 PM 由 Jeffrey
Filed under: , ,



意見

# 毛豆 said on 19 May, 2013 03:37 AM

由 CSS 的眼光來看,子容器的 100% 最大只能和父容器相同。

由於父容器的高度非由設計師指定,所以瀏覽器自行實作。此時子容器就被受限制

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2013>
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
 
RSS
【工商服務】
OrcsWeb: Windows Server Hosting
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication