2011-07-15 14 views
6

मैं एक आईफ्रेम के साथ खेल रहा हूं जो एक दूसरा पृष्ठ एम्बेड करता है और आईफ्रेम के ऊपर एक छोटा हेडर प्रदर्शित करता है।आईफ़्रेम पृष्ठ 100% एक्सएचटीएमएल पेज में क्यों काम नहीं करता है?

एक परीक्षण सेटअप में, height="100%" सही ढंग से काम किया है और एक और सेटअप में उसने ऐसा नहीं किया और एक XHTML दस्तावेज़ तो I noticed that अंतर था एक दस्तावेज़ जहां iframe ऊंचाई हमेशा 150px के बारे में करने के लिए स्थापित किया गया था था, और दस्तावेज़ जहां यह कार्यों में एक 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> 

और इस नहीं (ऊंचाई के बारे में 150px या तो)

<!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 में एक ही है करता है और एफएफ 5।

क्यों यह है कि यदि मेरे पास एक्सएचटीएमएल डक्ट टाइप है तो ऊंचाई प्रतिशत अब काम नहीं करेगा?

उत्तर

13

क्योंकि पृष्ठ मानक डीटीडी के साथ मानक मोड में प्रस्तुत करता है। अन्य मोड में काम करने का कारण यह है क्योंकि यह क्विर्क मोड में था।

यह क्विर्क मोड में क्यों काम करता है इसका कारण यह है कि ब्राउज़र बहुत ही कमजोर थे और अतीत में सख्त नहीं थे, और इस प्रकार लोगों ने height="100%" को अतीत में एचटीएमएल/बॉडी पर ऊंचाई निर्दिष्ट किए बिना किया था।

अब इसे करने का उचित तरीका HTML/body पर ऊंचाई सेट करना है। html, body { height:100%; }

कुछ ऐसा करने का प्रयास करें ताकि ऐसा होने के लिए आईफ्रेम को तत्काल बच्चे भी हो सके। वैकल्पिक रूप से आप शायद इसे बिल्कुल सही/निश्चित स्थिति दे सकते हैं।

+0

एचटीएमएल/बॉडी ऊंचाई की बात का जिक्र करने के लिए धन्यवाद। –

+1

लेकिन क्या आपको उस पृष्ठ की एचटीएमएल/बॉडी ऊंचाई सेट करने की आवश्यकता है जिसमें 'iframe' या वह पृष्ठ जो लोड हो जाता है? –

+0

ऊंचाई 100% काम नहीं किया, लेकिन आईफ्रेम पर पूर्ण स्थिति का उपयोग मेरे मामले में काम किया। धन्यवाद! –

संबंधित मुद्दे