2019 में अपडेट करें
टीएल; डीआर: आज सबसे अच्छा विकल्प इस जवाब में आखिरी है - फ्लेक्सबॉक्स। सब कुछ यह अच्छी तरह से समर्थन करता है और वर्षों के लिए है। उसके लिए जाओ और पीछे मत देखो। इस उत्तर का बाकी हिस्सा ऐतिहासिक कारणों से बचा हुआ है।
ट्रिक यह समझना है कि 100% क्या है। सीएसएस चश्मा पढ़ना आपको वहां मदद कर सकता है।
एक लंबी कहानी को छोटा करने के लिए - "ब्लॉक युक्त" जैसी एक चीज है - जो मूल तत्व आवश्यक नहीं है। सीधे शब्दों में, यह पदानुक्रम का पहला तत्व है जिसकी स्थिति: सापेक्ष या स्थिति: निरपेक्ष है। या शरीर तत्व ही अगर कुछ और नहीं है। इसलिए, जब आप "चौड़ाई: 100%" कहते हैं, तो यह "ब्लॉक युक्त" की चौड़ाई की जांच करता है और आपके तत्व की चौड़ाई को उसी आकार में सेट करता है। अगर वहां कुछ और था, तो आपको "ब्लॉक" युक्त सामग्री मिल सकती है जो खुद से बड़ी होती है (इस प्रकार "अतिप्रवाह")।
ऊंचाई उसी तरह काम करती है। एक अपवाद के साथ। आपको ब्राउज़र विंडो की 100% ऊंचाई नहीं मिल सकती है। बहुत ही शीर्ष स्तर का तत्व, जिसके खिलाफ 100% गणना की जा सकती है, वह है शरीर (या html? निश्चित नहीं) तत्व, और जो अपनी सामग्री समाहित करने के लिए पर्याप्त है। निर्दिष्ट ऊंचाई: इस पर 100% कोई प्रभाव नहीं पड़ेगा, क्योंकि इसके पास कोई "मूल तत्व" नहीं है, जिसके विरुद्ध 100% मापें। विंडो ही गिनती नहीं है। ;)
खिड़की के 100% हिस्से में कुछ खिंचाव करने के लिए, आपके पास दो विकल्प हैं:
- जावास्क्रिप्ट का उपयोग करें
- DOCTYPE का उपयोग न करें। यह एक अच्छा अभ्यास नहीं है, लेकिन यह ब्राउज़र को "quirks मोड" में रखता है, जिसमें आप तत्वों पर ऊँचाई = "100%" कर सकते हैं और यह उन्हें खिड़की के आकार तक बढ़ाएगा। ध्यान दें, आपके पृष्ठ के बाकी हिस्सों को संभवतः DOCTYPE परिवर्तनों के लिए समायोजित करने के लिए भी बदलना होगा।
अपडेट: मुझे यकीन नहीं है कि जब मैं इसे पोस्ट किया था तो मैं पहले से ही गलत नहीं था, लेकिन यह निश्चित रूप से अब पुराना है। आज आप इसे अपनी स्टाइलशीट में कर सकते हैं: html, body { height: 100% }और यह वास्तव में आपके व्यूपोर्ट के पूरे हिस्से तक फैलेगा। DOCTYPE के साथ भी। min-height: 100%आपकी स्थिति के आधार पर भी उपयोगी हो सकता है।
और मैं किसी को भी कभी भी क्वर्की-मोड दस्तावेज़ बनाने की सलाह नहीं दूंगा, क्योंकि इससे उन्हें सिरदर्द की तुलना में अधिक सिरदर्द होता है। हर ब्राउज़र में अलग-अलग क्वर्की-मोड होता है, इसलिए आपके पेज को लगातार ब्राउज़र में देखने के लिए प्राप्त करना मुश्किल परिमाण के दो आदेश बन जाते हैं। DOCTYPE का उपयोग करें। हमेशा। अधिमानतः HTML5 एक - <!DOCTYPE html>। यह याद रखना आसान है और सभी ब्राउज़रों में एक आकर्षण की तरह काम करता है, यहां तक कि 10 साल पुराने भी।
एकमात्र अपवाद तब होता है जब आपको IE5 या कुछ जैसे कुछ का समर्थन करना होता है। यदि आप वहाँ हैं, तो आप वैसे भी अपने दम पर हैं। वे प्राचीन ब्राउज़र आज के ब्राउज़रों की तरह कुछ भी नहीं हैं, और यहां दी गई थोड़ी सलाह आपको उनकी मदद करेगी। चमकदार पक्ष पर, यदि आप वहां हैं, तो आपको संभवतः केवल एक प्रकार के ब्राउज़र का समर्थन करना होगा, जो संगतता समस्याओं से छुटकारा दिलाता है।
सौभाग्य!
अद्यतन 2: अरे, यह एक लंबा समय हो गया है! 6 साल बाद, नए विकल्प दृश्य पर हैं। मेरे पास नीचे टिप्पणी में सिर्फ एक चर्चा थी, यहां आपके लिए और अधिक चालें हैं जो आज के ब्राउज़रों में काम करती हैं।
विकल्प 1 - पूर्ण स्थिति। जब आप पहले भाग की सटीक ऊँचाई जानते हैं, तो अच्छा और साफ।
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
कुछ नोट - second-rowकंटेनर की आवश्यकता है क्योंकि bottom: 0और right: 0किसी कारण से iframes पर काम नहीं करता है। "प्रतिस्थापित" तत्व होने के साथ कुछ करना है। लेकिन width: 100%और height: 100%ठीक काम करता है। display: blockयह आवश्यक है क्योंकि यह inlineडिफ़ॉल्ट रूप से एक तत्व है और व्हाट्सएप अन्यथा अजीब ओवरफ्लो बनाना शुरू कर देता है।
विकल्प 2 - टेबल। काम करता है जब आप पहले भाग की ऊंचाई नहीं जानते हैं। आप वास्तविक <table>टैग का उपयोग कर सकते हैं या इसे फैंसी तरीके से कर सकते हैं display: table। मैं बाद के लिए जाऊंगा क्योंकि यह इन दिनों फैशन में है।
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>
कुछ नोट्स - यह overflow: autoसुनिश्चित करता है कि पंक्ति में हमेशा इसकी सभी सामग्री शामिल हो। अन्यथा अस्थायी तत्व कभी-कभी अतिप्रवाह कर सकते हैं। height: 100%दूसरी पंक्ति पर यकीन है कि यह फैलता है के रूप में ज्यादा के रूप में यह छोटा सा के रूप में पहली पंक्ति फैलाएंगे कर सकते हैं के रूप में यह हो जाता है बनाता है।
विकल्प 3 - फ्लेक्सबॉक्स। उन सभी में सबसे साफ है, लेकिन तारकीय ब्राउज़र समर्थन से कम है। -ms-आईई 10 को फ्लेक्सबॉक्स गुणों के लिए उपसर्गों की आवश्यकता होगी , और इससे कम कुछ भी इसका समर्थन नहीं करेगा।
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
कुछ नोट - overflow: hiddenऐसा इसलिए है क्योंकि display: blockइस मामले में आईफ्रेम अभी भी कुछ प्रकार के अतिप्रवाह पैदा करता है । यह फ़ुलस्क्रीन दृश्य या स्निपेट संपादक में दिखाई नहीं देता है, लेकिन छोटी पूर्वावलोकन विंडो में एक अतिरिक्त स्क्रॉलबार मिलता है। पता नहीं क्या है, iframes अजीब हैं।