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