दिलचस्प पोस्ट
इकाई फ़्रेमवर्क: प्राथमिक कुंजी के बिना तालिका स्थैतिक खोजशब्द का उन्मूलन … और नहीं? केवल एक विशिष्ट तत्व के लिए बाहरी सीएसएस की सीमा का दायरा? java.lang.NoClassDefFound त्रुटि: javax / servlet / http / HttpServletRequest एक गतिविधि में तीसरी पार्टी लाइब्रेरी के दो बार मूल विधि कॉल करने से एंड्रॉइड एप्लिकेशन बंद हो जाता है JavaScript / JQuery का उपयोग करके एक सरल नक्शा कैसे बनाएं कैसे LINQ आंतरिक रूप से काम करता है? कुछ डेटा को दूसरे टुकड़ों में कैसे स्थानांतरित किया जाए? सबसे कुशल टी-एसक्यूएल का रास्ता एक निश्चित लंबाई के लिए बाईं तरफ एक varchar पैड? प्रत्येक सरणी के txt फ़ाइल को नए सरणी तत्व में पढ़ें एक SqlParameter को अशक्त असाइन करें मैं Linq आदेश को गतिशील रूप से तर्क कैसे निर्दिष्ट करूं? क्या यह पायथन की पुनः कॉमपाइल का उपयोग करने लायक है? यदि printf को गलत स्वरूप स्ट्रिंग के साथ कहा जाता है तो क्या हो सकता है? शुद्ध जेपीए सेटअप में डाटाबेस कनेक्शन प्राप्त करना

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

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