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