पूर्ण ऊंचाई का विस्तार करने के लिए div के लिए

Question 1

क्या एक ऐसी विधि है जिसका उपयोग मैं डिव के लिए पूरी ऊंचाई तक कर सकता हूं? मुझे इसमें एक चिपचिपा पाद मिला है।

यहां वेब पेज: वेबसाइट को हटा दिया गया है । मैं जिस मध्य बिट के बारे में बात कर रहा हूं वह है सफेद div, midcontent जिसमें CSS मान हैं:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

तो हाँ, स्पष्ट रूप से height:100%काम नहीं किया। इसके अतिरिक्त, सभी माता-पिता के कंटेनरों की ऊंचाई निर्धारित है।

यहाँ सामान्य संरचना है

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

Question 2

क्या आपको अपने CSS में html और बॉडी टैग की ऊंचाई सेट करना याद था? यह आम तौर पर है कि मैंने पूरी ऊंचाई तक जाने के लिए DIVs कैसे प्राप्त किए हैं:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

Question 3

यह कुछ मदद हो सकती है: http://www.webmasterworld.com/forum83/200.htm

एक प्रासंगिक उद्धरण:

इसे पूरा करने के अधिकांश प्रयास संपत्ति और मूल्य को निर्दिष्ट करके किए गए थे: div {height: 100%} - यह अकेले काम नहीं करेगा। इसका कारण यह है कि माता-पिता के बिना परिभाषित ऊँचाई, div {ऊँचाई: 100%;} में 100% प्रतिशत कारक कुछ भी नहीं है, और div के मान के लिए डिफ़ॉल्ट होगा {ऊँचाई: ऑटो;} - ऑटो एक "के रूप में आवश्यक मूल्य है" "जो वास्तविक सामग्री द्वारा शासित होता है, ताकि div {height: 100%} एक = केवल सामग्री की मांग के अनुसार ही आगे बढ़े।

समस्या का समाधान मूल कंटेनर में एक ऊंचाई मान निर्दिष्ट करके पाया जाता है, इस मामले में, शरीर तत्व। ऊंचाई के 100% को शामिल करने के लिए अपने शरीर को स्टेली लिखना आवश्यक मूल्य की आपूर्ति करता है।
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

Question 4

यह एक पुराना सवाल है। सीएसएस विकसित हुआ है। अब vh(व्यूपोर्ट ऊंचाई) इकाई है, नए लेआउट विकल्प जैसे कि flexboxया CSS gridक्लीनर तरीके से शास्त्रीय डिजाइन प्राप्त करने के लिए।

Question 5

मामले में भी html और शरीर की ऊँचाई को 100% पर सेट करना आपके लिए सब कुछ गड़बड़ कर देता है जैसा कि इसने मेरे लिए किया था, इसके लिए निम्न कार्य निम्नलिखित हैं:

height: calc(100vh - 33rem)

- 33rem तत्वों एक हम पूरी ऊंचाई, यानी, 100vh ले जाना चाहते हैं के बाद आने वाले की ऊंचाई है। ऊंचाई को घटाकर, हम यह सुनिश्चित करेंगे कि कोई अतिप्रवाह न हो और यह हमेशा उत्तरदायी होगा (यह मानते हुए कि हम px के बजाय रेम के साथ काम कर रहे हैं)।

Question 6

यदि 100% ऊंचाई सेट करना काम नहीं करता है, तो min-height = 100% div के लिए प्रयास करें। आपको अभी भी html टैग सेट करना है।

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}