मैं एक ऐसे डिज़ाइन को लेआउट करने की कोशिश कर रहा हूं जिसमें स्क्रीन के शीर्ष पर एक निश्चित ऊंचाई शीर्षलेख है, और फिर शेष स्थान ले जाने के नीचे एक आईफ्रेम है।iframe लंबवत स्क्रॉलबार के कारण 100% ऊंचाई
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style>
</head>
<body>
<div style="height:70px;background-color:blue;"></div>
<div style="position:absolute;top:70px;bottom:0;left:0;right:0;">
<iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe>
</div>
</body>
</html>
अनिवार्य रूप से, मैं शीर्षक के नीचे एक बिल्कुल तैनात div बनाने और उसे आकार देने वाला अंतरिक्ष के बाकी को लेने के लिए कर रहा हूँ, तो में पूर्ण आकार आइफ्रेम डाल: समाधान मैं के साथ आया था इस प्रकार है ।
जिस समस्या में मैं दौड़ रहा हूं वह यह है कि यदि आप प्रत्येक ब्राउज़र में (एक्सएचटीएमएल सख्त का उपयोग करके, नीचे दिए गए कोड को ठीक पेस्ट करते हैं, तो परीक्षण किया गया है/परीक्षण/w/क्रोम/सफारी/यानी 8) आप कुछ के साथ एक लंबवत स्क्रॉल बार देखेंगे div के नीचे सफेद जगह के पिक्सेल।
कुछ प्रयोग करने से, मैंने पाया कि अगर मैं पूरी तरह से डॉक्टरेट को हटा देता हूं तो यह सफारी/क्रोम में काम करता है, लेकिन आईई भी बदतर हो जाता है, अगर आईफ़्रेम ऊंचाई 300px या उससे भी अधिक हो जाती है। यदि मैं डॉक्ट टाइप को संक्रमणकालीन में सेट करता हूं, तो यह सफारी/क्रोम में काम करता है लेकिन आईई 8 के लिए सख्त मामले में भी यही समस्या है। अगर मैं एचटीएमएल 5 डॉक्ट टाइप का उपयोग करता हूं, तो यह सभी ब्राउज़रों में सख्त समस्या है।
आखिरकार, अगर मैं इनमें से किसी भी मामले में आईफ्रेम हटा देता हूं, तो सब ठीक है।
किसी के पास कोई विचार है?
धन्यवाद, यह चाल है! जिज्ञासा से बाहर, कोई विचार क्यों अतिरिक्त सामग्री दिखाई दे रही थी? संकल्पनात्मक रूप से ऐसा लगता है कि पेज के भीतर सबकुछ फिट होना चाहिए। – Keevon
आईई के अद्भुत पैडिंग/मार्जिन बग्स में से एक - मुझे यकीन है ... –
बहुत बढ़िया। धन्यवाद। इस काम को पाने की कोशिश करने के लिए आपने मेरी परेशान लंबी खोज में पहेली का लापता टुकड़ा दिया। दुर्भाग्यवश, आईई 6 और 7 में (आईई 8 के बारे में नहीं पता) मुझे अभी भी एक आईई केवल शैली का उपयोग करना पड़ा: 'ऊंचाई: अभिव्यक्ति ((document.body.offsetHeight - 25) +' px '); '। लेकिन मैं इसके साथ ठीक हूँ। फ़ायरफ़ॉक्स और अन्य ब्राउज़र इस शैली को अनदेखा करते हैं। सौभाग्य से मेरा हेडर बार निश्चित आकार है। document.getElementById ('headerbar') offsetHeight' या कुछ इस तरह -। यदि नहीं, तो मैं उपयोग करने के लिए 'document.body.offsetHeight होगा। – ErikE