2012-03-20 7 views
13

मेरा प्रश्न IFRAME and conflicting absolute positions के समान है, लेकिन मैं विशेष रूप से क्यों आप दोनों को छोड़ दिया/सही है या शीर्ष/एक iframe में नीचे निर्धारित नहीं कर सकते पता है की चाहते और इसे काम करने के लिए मिलता है।क्यों आप iframe पूर्ण स्थिति उपयोग नहीं कर सकते सेट करने के लिए ऊंचाई/चौड़ाई

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
iframe { position: absolute; display: block; top: 0; bottom: 0; left: 10px; width:100px; border: 1px solid black;} 
div { position: absolute; display: block; top: 0; bottom: 0; left: 200px; width:100px; border: 1px solid black;} 
</style> 
</head> 
<body> 
<iframe></iframe> 
<div></div> 
</body> 
</html> 

div पूरी ब्राउज़र ऊंचाई लेता है। आईफ्रेम 150px लंबा है। क्रोम 17, फ़ायरफ़ॉक्स 11 और आईई 9 में यह वही है। स्पष्ट रूप से यह एक ब्राउज़र quirk नहीं है। एचटीएमएल 5 spec में कुछ है जो कहता है कि ऊंचाई निर्धारित करने के लिए आप iframe पर बाएं/दाएं या ऊपर/नीचे दोनों सेट नहीं कर सकते हैं।

iframes (बनाम divs) के बारे में विशेष क्या है?

उत्तर

19

इफ्रेम "replaced elements" हैं।

इन्हें गैर-प्रतिस्थापित तत्वों से अलग तरीके से माना जाता है। विवरण में जाने के बिना, केवल सामग्री की कल्पना की मेज पर देखो: http://www.w3.org/TR/CSS21/visudet.html

10,3 गिना जा रहा है चौड़ाई और मार्जिन
10.3.1 इनलाइन, गैर प्रतिस्थापित तत्वों
10.3.2 इनलाइन, प्रतिस्थापित तत्वों
10.3 .3 ब्लॉक स्तर के, सामान्य प्रवाह में गैर प्रतिस्थापित तत्वों
10.3.4 ब्लॉक स्तर के, सामान्य प्रवाह
10.3.5 में तत्वों की जगह, फ्लोटिंग गैर प्रतिस्थापित तत्वों
10.3.6 फ्लोटिंग, तत्वों
प्रतिस्थापित 210 10.3.7 बिल्कुल उपयुक्त, गैर प्रतिस्थापित तत्वों // div
10.3.8 बिल्कुल तैनात तत्वों, प्रतिस्थापित // आइफ्रेम
10.3.9 'इनलाइन-ब्लॉक', सामान्य प्रवाह
में गैर प्रतिस्थापित तत्वों 10.3.10 'इनलाइन-ब्लॉक', सामान्य प्रवाह में तत्वों

23

यह अभी काम नहीं करेगा। आईफ्रेम बनाया गया तरीका है।

यदि आप अभी भी एक ही समाधान तक पहुंचना चाहते हैं, तो आप पूर्ण स्थिति, अपने शीर्ष, बाएं, दाएं, नीचे के साथ एक div के रूप में एक div का उपयोग करें। उस div में अपनी आईफ्रेम चौड़ाई चौड़ाई रखो: 100% और ऊंचाई: 100%।

समस्या हल हो गई।

+0

यह सवाल, ओपी समस्या का समाधान की मांग नहीं कर रहा था, बल्कि एक के रूप में स्पष्टीकरण का उत्तर न मिले प्रतिस्थापित क्यों एक iframe नहीं कर सकते बिल्कुल स्थित है। –

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

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