दिलचस्प पोस्ट
मैं HH: MM: SS में प्रारूप में दो बार स्ट्रिंग कैसे तुलना कर सकता हूं? पीडीओ: MySQL सर्वर दूर चला गया है एक प्रोटोकॉल में केवल-प्राप्त संपत्ति की आवश्यकता क्यों नहीं है, जो एक संपत्ति से संतुष्ट होती है? Windows में कमांड लाइन का उपयोग कर निर्देशिका के लिए उपयोगकर्ताओं को अनुमति देने के लिए कैसे? कोणीय UI- राउटर $ urlRouterProvider। जब मैं कार्य नहीं करता <a ui-sref="…"> क्लिक करता हूँ कैसे CGCeyCode ASCII चरित्र को परिवर्तित करने के लिए? सी # वेबब्रोजर नियंत्रण – फॉर्म InvoxMember ("क्लिक करें") का उपयोग कर कार्य नहीं सबमिट करें C ++ में स्ट्रिंग से कुछ वर्ण कैसे निकालें? अजगर: निष्पादन योग्य ज़िप फ़ाइलों में डेटा फ़ाइलों को शामिल किया जा सकता है? स्वचालित रूप से संपूर्ण एस 3 बाल्टी के लिए कैश-नियंत्रण सेट करें (बाल्टी नीतियों का उपयोग करें?) एंड्रॉइड – एसक्यूलाइट डेटाबेस एंड्रॉइड डिवाइस को खींच रहा है क्या NSUserDefaults में मूल्यों को संचय में कोई सीमा है? क्या जावास्क्रिप्ट में स्थिरता है? एक कुंजी को छोड़कर एक जेएस वस्तु क्लोन करें स्थानीय यातायात के लिए यातायात की अनदेखी को रोकने के लिए मैं फिल्डल को कैसे प्राप्त करूं?

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

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 होने से समाप्त होती है

Solutions Collecting From Web of "सीएसएस – क्यों प्रतिशत ऊंचाई काम नहीं करता है?"

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

 <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% होगा