वेबसाइट डिज़ाइन में आमतौर पर पूछे जाने वाले प्रश्न "आप तत्व की ऊंचाई 100% पर कैसे सेट करते हैं"?
यह एक आसान जवाब की तरह लग सकता है। आप तत्व की ऊंचाई 100% पर सेट करने के लिए बस सीएसएस का उपयोग करते हैं, लेकिन यह हमेशा उस तत्व को पूरी ब्राउज़र विंडो में फिट करने के लिए नहीं खींचता है। आइए जानें कि यह क्यों होता है और आप इस दृश्य शैली को प्राप्त करने के लिए क्या कर सकते हैं।
पिक्सेल और प्रतिशत
जब आप सीएसएस प्रॉपर्टी का उपयोग करके किसी तत्व की ऊंचाई को परिभाषित करते हैं और एक मान जो पिक्सल का उपयोग करता है, वह तत्व ब्राउज़र में उस लंबवत स्थान को ले जाएगा।
उदाहरण के लिए, ऊंचाई के साथ एक अनुच्छेद: 100 पीएक्स; आपके डिज़ाइन में 100 पिक्सेल वर्टिकल स्पेस लेगा। इससे कोई फ़र्क नहीं पड़ता कि आपकी ब्राउज़र विंडो कितनी बड़ी है, यह तत्व ऊंचाई में 100 पिक्सल होगा।
प्रतिशत पिक्सेल से अलग काम करते हैं। डब्ल्यू 3 सी विनिर्देश के अनुसार, प्रतिशत ऊंचाई की गणना कंटेनर की ऊंचाई के संबंध में की जाती है। तो यदि आप ऊंचाई के साथ एक अनुच्छेद डालते हैं: 50%; एक div के अंदर 100px की ऊंचाई के साथ, अनुच्छेद ऊंचाई में 50 पिक्सल होगा, जो इसके मूल तत्व का 50% है।
प्रतिशत हाइट्स क्यों विफल हो जाते हैं
यदि आप एक वेबपृष्ठ डिजाइन कर रहे हैं, और आपके पास एक कॉलम है जिसे आप खिड़की की पूरी ऊंचाई लेना चाहते हैं, तो प्राकृतिक झुकाव ऊंचाई जोड़ना है: 100%; उस तत्व के लिए। आखिरकार, यदि आप चौड़ाई चौड़ाई निर्धारित करते हैं: 100%; तत्व पृष्ठ के पूर्ण क्षैतिज स्थान को ले जाएगा, इसलिए ऊंचाई को वही काम करना चाहिए, है ना? दुर्भाग्य से, यह बिल्कुल मामला नहीं है।
यह समझने के लिए कि ऐसा क्यों होता है, आपको समझना होगा कि ब्राउज़र ऊंचाई और चौड़ाई की व्याख्या कैसे करते हैं। वेब ब्राउज़र कुल उपलब्ध चौड़ाई की गणना करता है कि ब्राउज़र विंडो कितनी चौड़ी है। यदि आप अपने दस्तावेज़ों पर कोई चौड़ाई मान निर्धारित नहीं करते हैं, तो ब्राउज़र विंडो की पूरी चौड़ाई को भरने के लिए स्वचालित रूप से सामग्री का प्रवाह करेगा (100% चौड़ाई डिफ़ॉल्ट है)।
ऊँचाई मान चौड़ाई से अलग गणना की जाती है। वास्तव में, ब्राउज़र तब तक ऊंचाई का मूल्यांकन नहीं करते हैं जब तक सामग्री इतनी लंबी न हो कि यह व्यूपोर्ट के बाहर हो (इस प्रकार स्क्रॉल बार की आवश्यकता होती है) या यदि वेब डिज़ाइनर पृष्ठ पर किसी तत्व के लिए पूर्ण ऊंचाई निर्धारित करता है। अन्यथा, ब्राउजर बस अंत तक आने तक व्यूपोर्ट की चौड़ाई के भीतर सामग्री प्रवाह को अनुमति देता है। ऊंचाई वास्तव में गणना नहीं की जाती है।
समस्या तब होती है जब आप उस तत्व पर प्रतिशत ऊंचाई निर्धारित करते हैं जिसमें पैर के बिना पैर तत्वों को सेट किया जाता है - दूसरे शब्दों में, मूल तत्वों की डिफ़ॉल्ट ऊंचाई होती है: ऑटो; । आप वास्तव में, ब्राउज़र को एक अपरिभाषित मान से ऊंचाई की गणना करने के लिए कह रहे हैं। चूंकि यह शून्य-मूल्य के बराबर होगा, नतीजा यह है कि ब्राउज़र कुछ भी नहीं करता है।
यदि आप अपने वेब पृष्ठों पर एक प्रतिशत तक ऊंचाई निर्धारित करना चाहते हैं, तो आपको उस ऊंचाई के प्रत्येक मूल तत्व की ऊंचाई निर्धारित करनी होगी जिसे आप परिभाषित ऊंचाई चाहते हैं। दूसरे शब्दों में, यदि आपके पास ऐसा कोई पृष्ठ है:
यहां सामग्री
आप शायद div और अनुच्छेद में 100% ऊंचाई चाहते हैं, लेकिन उस div में वास्तव में दो मूल तत्व हैं:
तथा। Div की ऊंचाई को सापेक्ष ऊंचाई पर परिभाषित करने के लिए, आपको शरीर और एचटीएमएल तत्वों की ऊंचाई भी निर्धारित करनी होगी।
तो आपको न केवल div की ऊंचाई निर्धारित करने के लिए सीएसएस का उपयोग करना होगा, बल्कि शरीर और एचटीएमएल तत्वों को भी सेट करना होगा। यह एक चुनौती हो सकती है, क्योंकि आप इस वांछित प्रभाव को प्राप्त करने के लिए केवल 100% ऊंचाई पर सेट किए जा रहे सबकुछ से अभिभूत हो सकते हैं।
100% ऊंचाइयों के साथ काम करते समय ध्यान देने योग्य कुछ बातें
अब जब आप जानते हैं कि अपने पृष्ठ तत्वों की ऊंचाई 100% तक कैसे सेट करें, तो बाहर जाना और अपने सभी पृष्ठों पर ऐसा करना रोमांचक हो सकता है, लेकिन ऐसी कुछ चीजें हैं जिनके बारे में आपको अवगत होना चाहिए:
- मार्जिन और पैडिंग एक स्क्रॉल बार जोड़ सकते हैं जहां आप एक नहीं चाहते हैं। प्रतिशत ऊंचाई (और चौड़ाई) के साथ काम करने के साथ मुझे मिली सबसे परेशान चीजों में से एक यह है कि तब उन तत्वों पर पैडिंग और मार्जिन पृष्ठ पर स्क्रॉल बार जोड़ सकते हैं, भले ही सभी सामग्री स्क्रॉल बार की आवश्यकता के बिना प्रदर्शित हो। ऐसा इसलिए है क्योंकि तत्व की ऊंचाई या चौड़ाई गणना की जाने वाली पहली चीज़ है। फिर मार्जिन और पैडिंग जोड़े जाते हैं। तो यदि आपके पास 100% की ऊंचाई वाला प्रत्येक तत्व है और प्रत्येक 10 पिक्सेल के शीर्ष और निचले मार्जिन हैं, तो अतिरिक्त 20 पिक्सेल के लिए स्क्रॉल बार होगा। याद रखें, सीएसएस बॉक्स मॉडल किसी तत्व के आकार पर मार्जिन, सीमा और पैडिंग जोड़ता है, इसलिए उन अन्य बॉक्स मॉडल मानों में से 100% वास्तव में 100% से अधिक होंगे।
- यदि आपकी सामग्री परिभाषित ऊंचाई से अधिक लेती है, तो यह उसके बाद कुछ भी ओवरराइट कर देगी। दूसरे शब्दों में, यदि आपके पास एक कॉलम वाला डिज़ाइन है जो ऊंचाई में 80% है, और इसके अंदर की सामग्री ऊंचाई का 100% ले लेगी, तो अतिरिक्त 20% कॉलम के नीचे जारी रहेगा और दृश्य डिज़ाइन को तोड़ देगा आपके पेज का यदि उस कॉलम के नीचे सामग्री है, तो टेक्स्ट बस इसके शीर्ष पर लिख जाएगा। मैं अक्सर ऐसा तब होता हूं जब कोई वेब डिज़ाइनर किसी पृष्ठ की ऊंचाई को मजबूर करने की कोशिश करता है और इसे लॉन्च के लिए पूरी तरह से काम करता है, लेकिन जब उस पृष्ठ पर सामग्री भविष्य में बदल जाती है, तो उनकी पूर्ण ऊंचाई पूरी तरह से पृष्ठ के प्रवाह को तोड़ देती है। यह दोगुना सच है जब आप उत्तरदायी वेबसाइटें बना रहे हैं जिनकी चौड़ाई और ऊंचाई व्यूपोर्ट के आकार के साथ बदलनी चाहिए।
इसे ठीक करने के लिए, आप तत्व की ऊंचाई भी सेट कर सकते हैं। यदि आप इसे ऑटो पर सेट करते हैं, तो स्क्रॉल बार दिखाई देंगे यदि उनकी आवश्यकता हो, लेकिन जब वे नहीं हैं तो गायब हो जाएंगे। यह दृश्य ब्रेक को ठीक करता है, लेकिन यह स्क्रॉलबार जोड़ता है जहां आप उन्हें नहीं चाहते हैं।
व्यूपोर्ट इकाइयों का उपयोग करना
इस चुनौती से निपटने का एक और तरीका सीएसएस व्यूपोर्ट इकाइयों के साथ प्रयोग करना है। माप की व्यूपोर्ट ऊंचाई इकाई का उपयोग करके, आप व्यूपोर्ट की परिभाषित ऊंचाई लेने के लिए तत्वों को आकार दे सकते हैं, और व्यूपोर्ट परिवर्तन के रूप में बदल जाएगा! यह पृष्ठ पर आपके 100% ऊंचाई दृश्य प्राप्त करने का एक शानदार तरीका है लेकिन फिर भी वे विभिन्न उपकरणों और स्क्रीन आकारों के लिए लचीला हो सकते हैं।