दिलचस्प पोस्ट
मैं ctrl + c को c # में एक प्रक्रिया के लिए कैसे भेजूं? .NET में संरचना और कक्षा के बीच अंतर क्या है? स्थैतिक विधि को लागू करने के लिए कस्टम ईएल फ़ंक्शन कैसे बनाएं? टेक्स्टवेयर में jQuery के साथ टेक्स्ट डालें कैसे PHP में एक खाली सरणी में तत्वों को जोड़ने के लिए? जावास्क्रिप्ट पर गंतव्य यूआरएल कैसे प्राप्त कर सकता है? एआरएम: लिंक रजिस्टर और फ्रेम सूचक कैसे जावा में बाइट सरणी में छवि कन्वर्ट करने के लिए? कैसे एक पारदर्शी UIWebView बनाने के लिए जावा कम्पाइलर के लिए एक त्रुटि एक उदाहरण के रूप में एक स्थिर विधि क्यों नहीं बुला रही है? जावा निरर्थक जांच करें कि .equals () के बजाय == का उपयोग क्यों करें संदर्भ बनाम से गुजरने में अंतर क्या है? मूल्य से गुजर रहा है? एंड्रॉइड में फ़ायरबेज डाटा डिस्क्स सॉर्टिंग सूची में सभी स्ट्रिंग्स को कनवर्ट करें अजगर नेस्टेड फ़ंक्शन बंद क्यों नहीं किए गए हैं?

सीएसएस – क्यों प्रतिशत ऊंचाई काम नहीं करता है?

height प्रतिशत मान कैसे काम करता है, लेकिन width लिए एक प्रतिशत मूल्य क्या होता है?

उदाहरण के लिए :

 <div id="working"></div> <div id="not-working"></div> 
 #working{ width:80%; height:140px; background:orange; } #not-working{ width:80%; height:30%; background:green; } 

#working की चौड़ाई व्यूपोर्ट का 80% तक समाप्त हो जाती है, लेकिन #not-working की ऊँचाई 0 होने से समाप्त होती है

वेब के समाधान से एकत्रित समाधान "सीएसएस – क्यों प्रतिशत ऊंचाई काम नहीं करता है?"

खंड सामग्री की ऊंचाई ब्लॉक की सामग्री की ऊंचाई के मुकाबले। तो, ऐसा कुछ दिया गया है:

 <div id="outer"> <div id="inner"> <p>Where is pancakes house?</p> </div> </div> 

#inner को पैराग्राफ को शामिल करने के लिए पर्याप्त लंबा होना चाहिए और #outer को पर्याप्त बनाने के लिए #inner

जब आप प्रतिशत के रूप में ऊँचाई या चौड़ाई निर्दिष्ट करते हैं, तो तत्व के मूल के संबंध में एक प्रतिशत होता है। चौड़ाई के मामले में, सभी ब्लॉक तत्व अन्यथा निर्दिष्ट नहीं किए जाते हैं, उनके माता-पिता के रूप में विस्तृत रूप से <html> ; इसलिए, ब्लॉक तत्व की चौड़ाई इसकी सामग्री से स्वतंत्र है और कह रही है width: 50% की एक अच्छी तरह परिभाषित संख्या पिक्सल उत्पन्न करती है

हालांकि, ब्लॉक तत्व की ऊंचाई उसकी सामग्री पर निर्भर करती है जब तक कि आप एक विशिष्ट ऊंचाई निर्दिष्ट न करें। इसलिए माता-पिता और बच्चे के बीच फीडबैक है, जहां ऊँचाई का संबंध है और height: 50% कह रही है height: 50% एक अच्छी तरह से परिभाषित मूल्य नहीं देते हैं जब तक कि आप मूल तत्व को एक विशिष्ट ऊँचाई देकर फीडबैक लूप को तोड़ते नहीं हैं।

ऊँचाय संपत्ति में एक प्रतिशत मूल्य थोड़ा जटिल है, और width और height गुण वास्तव में एक-दूसरे के लिए अलग-अलग व्यवहार करते हैं मुझे आपको चश्मा के माध्यम से एक यात्रा पर ले जाना चाहिए।

height संपत्ति:

देखते हैं कि सीएसएस स्नैपशॉट 2010 युक्ति height बारे में कहती है :

प्रतिशत की गणना जनरेट बॉक्स के युक्त ब्लॉक की ऊंचाई के हिसाब से की जाती है। यदि ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है (यानी, यह सामग्री ऊँचाई पर निर्भर करता है), और यह तत्व पूरी तरह से तैनात नहीं है, मान 'ऑटो' के लिए गणना करता है मूल तत्व पर एक प्रतिशत ऊँचाई प्रारंभिक युक्त ब्लॉक के सापेक्ष है। नोट: पूरी तरह से तैनात तत्वों के लिए जिनके ब्लॉक ब्लॉक ब्लॉक-स्तर के तत्व पर आधारित हैं, प्रतिशत की गणना उस तत्व के पैडिंग बॉक्स की ऊंचाई के हिसाब से की जाती है।

ठीक है, कदम से अलग कदम उठाए:

प्रतिशत की गणना जनरेट बॉक्स के युक्त ब्लॉक की ऊंचाई के हिसाब से की जाती है।

एक युक्त ब्लॉक क्या है? यह थोड़ा जटिल है, लेकिन डिफ़ॉल्ट static स्थिति में एक सामान्य तत्व के लिए, यह है:

निकटतम ब्लॉक कंटेनर पूर्वज बॉक्स

या अंग्रेजी में, उसके मूल बॉक्स। (यह अच्छी तरह से जानने योग्य है कि यह fixed और absolute पदों के लिए भी क्या होगा, लेकिन मैं इस जवाब को कम रखने की अनदेखी कर रहा हूं।)

तो इन दो उदाहरण लें:

 <div id="a" style="width: 100px; height: 200px; background-color: orange"> <div id="aa" style="width: 100px; height: 50%; background-color: blue"></div> </div> 

आपको इसे एक कंटेनर की ऊंचाई के साथ देने की आवश्यकता है चौड़ाई व्यूपोर्ट को डिफ़ॉल्ट चौड़ाई के रूप में उपयोग करता है

मुझे लगता है कि आपको इसे एक पेरेंट कंटेनर देने की आवश्यकता है … भले ही उस कंटेनर की ऊंचाई प्रतिशत में परिभाषित की गई हो। यह ठीक काम करने के लिए यह तेजी: जेएसएफडेल

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; } .container { width: 100%; height: 50%; } 

एक और विकल्प div को शैली जोड़ना है

 <div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)"> //to be scrolled </div> 

और इसका मतलब है कि एक तत्व निकटतम पूर्वजों के निकट स्थित है।

सामग्री के बिना, ऊँचाई के प्रतिशत की गणना करने के लिए कोई मूल्य नहीं है। यदि कोई माता-पिता निर्दिष्ट नहीं है, तो चौड़ाई, डीओएम से प्रतिशत लेगा। (अपने उदाहरण का उपयोग करना) पहली div के अंदर दूसरे डिवा को रखकर, परिणामस्वरूप … नीचे दिए गए उदाहरण …

 <div id="working"> <div id="not-working"></div> </div> 

दूसरा डिवा पहली डिवीज़ की ऊंचाई का 30% होगा