html - Height: 100% Not Working Even Though All Parents Have Height: 100% -

सेटिंग ऊंचाई: 100% के लिए & lt; div & gt; नीचे दिए गए HTML में .ui सभी पैरेंट तत्वों में height को 100% पर सेट किया गया है।

क्या ऐसा हो सकता है क्योंकि मैं & lt; कोर-हेडर-पैनल & ​​gt; का उपयोग कर रहा / रही हूं? मैंने अपने कोड की जांच की, लेकिन मुझे कुछ भी दिखाई नहीं देता जो ऊँचाई ओवरराइड हो।

क्या यह लेआउट क्षैतिज गुणों का उपयोग करने के कारण हो सकता है?

< Em> लेआउट विशेषताओं (शीर्ष पर निर्मित) और core-header-panel का हिस्सा हैं।

यह HTML है (सरलीकृत):

  & lt;; doctype html & gt; & LT; html & gt; & Lt; शरीर अनसुलझे & gt; & LT; कोर हेडर पैनल & ​​gt; & Lt; div लेआउट क्षैतिज वर्ग = "कंटेनर" & gt; & Lt; div class = "ui" & gt; & Lt; / div & gt; & Lt;! - यह ऊंचाई का 100% नहीं लेता है - & gt; & Lt; div फ्लेक्स वर्ग = "आइटम" & gt; & Lt; / div & gt; & Lt;! - इसमें इसकी सामग्री है जो ऊंचाई भरती है, लेकिन & lt; div & gt; खुद नहीं करता - & gt;  

और यह मेरी सीएसएस (सरलीकृत) है:

  html, body {height: 100%; } कोर-हेडर-पैनल {ऊंचाई: 100%; अतिप्रवाह: ऑटो; -विबकिट-ओवरफ्लो-स्क्रॉलिंग: स्पर्श करें; }। कंटेनर {चौड़ाई: 100%; ऊंचाई: 100%; } .ui {ऊंचाई: 100%; स्थिति: रिश्तेदार; मार्जिन: 30px; } .इमें {डिस्प्ले: इनलाइन-ब्लॉक; ऊंचाई: 100%; मार्जिन: 30px; }  

किसी भी मदद की सराहना की जाएगी।

1 संपादन करें DevTools का उपयोग करते हुए मैंने देखा कि & lt; कोर-हेडर-पैनल & ​​gt; ऊंचाई का 100% ऊपर ले जाता है, लेकिन & lt; div & gt; कंटेनर नहीं करता है ऊंचाई: 100%; को .container में DevTools में "शैलियाँ" टैब में पार नहीं किया गया है।

संपादन 2: जानकारी चालू पॉलिमर और दोनों पृष्ठों के शीर्ष दाईं ओर गिथूब लिंक हैं।

समाधान था वास्तव में वास्तव में सरल

मुझे पूर्णिंबित लंबवत लेआउट से & lt; core-header-panel & gt; जोड़ना पड़ा। पूर्णिमा इसे माता-पिता की पूरी ऊँचाई लेने के लिए मजबूर करता है। ऊंचाई: 100% निर्दिष्ट करने के बाद मुझे इसके लिए कोई कारण नहीं देखा था, लेकिन ऐसा प्रतीत होता है कि यह इसके बिना काम नहीं करता।

मैंने भी फिट < / Code> से और lt; div & gt; .container इसे माता-पिता को फिट करने के लिए।

  & lt;! Doctype html & gt; & LT; html & gt; & Lt; शरीर अनसुलझे & gt; & Lt; कोर-हैडर-पैनल पूर्ण-लंबवत लेआउट & gt; & Lt;! - जोड़ा गया "फ़ुलब्लेड वर्टिकल लेआउट" यहां - & gt; & Lt; div फिट लेआउट क्षैतिज वर्ग = "कंटेनर" & gt; & Lt;! - यहां "फिट" जोड़ा गया - & gt; & Lt; div class = "ui" & gt; & Lt; / div & gt; & Lt; div फ्लेक्स वर्ग = "आइटम" & gt; & Lt; / div & gt;