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