मैं एक कंटेनर को पूरे पृष्ठ (या व्यूपोर्ट, जो भी बड़ा हो) भरने की कोशिश कर रहा हूं, लेकिन कुछ परेशानी में भाग गया। मैं इस पोस्ट से सिफारिशों का उपयोग कर रहा हूं: https://stackoverflow.com/a/17555766, <html> और <body> को 100% ऊंचाई पर सेट करने के लिए।कंटेनर ऊंचाई विरासत में क्यों नहीं है, जब यह न्यूनतम ऊंचाई के साथ आकार में है?
लेकिन मैंने देखा है कि .Content div केवल व्यूपोर्ट भर जाता है जब <body> ऊंचाई height: 100% साथ सेट कर दिया जाता है, लेकिन min-height: 100% के साथ नहीं। ऐसा क्यों है? .Content<body> की ऊंचाई क्यों उठाता है जब यह min-height के साथ सेट होता है? क्या इसके लिए कोई फिक्स है (पूर्ण स्थिति या निश्चित ऊंचाइयों के बिना)?
एचटीएमएल
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
सीएसएस
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
codepen: http://codepen.io/anon/pen/mJEMVX
पी.एस .: जब <body> ऊंचाई height: 100% साथ सेट कर दिया जाता है, दोनों min-height: 100% और height: 100% काम .Content के लिए अपेक्षा के अनुरूप।
मुझे लगता है कि अंतर्निहित कारण शरीर की ऊंचाई और सामग्री की ऊंचाई के बीच परिपत्र निर्भरता है। कल्पना करें कि '.content' के बाद एक और तत्व है। अब, यदि सामग्री 100% तक फैली हुई है, तो शरीर को भी विस्तार करना चाहिए, जिससे सामग्री आगे बढ़ेगी। संभावित रूप से कारण यह है कि स्पेक प्रतिशत की ऊंचाई को परिभाषित करता है जिस तरह से यह इस परिपत्र निर्भरता को तोड़ना है। –
@Alexey Lebedev: यह सही है। – BoltClock