एक DIV की ऊंचाई को उसकी सामग्री के साथ कैसे बढ़ाया जाए

यह प्रश्न एक DIV की ऊंचाई के विस्तार से संबंधित है ताकि उसके आंतरिक DIV को समायोजित किया जा सके कंटेनर DIV की संरचना को बनाए रखना। इस वांछित व्यवहार को प्राप्त करने के लिए, सीएसएस लेआउट में संशोधन लागू करना आवश्यक है।

एक दृष्टिकोण में "स्पष्ट: दोनों;" जोड़ना शामिल है। #main_content DIV को बंद करने से पहले संपत्ति। यह सीएसएस नियम ब्राउज़र को किसी भी पूर्ववर्ती फ़्लोटिंग तत्वों की उपेक्षा करने का निर्देश देता है, यह सुनिश्चित करते हुए कि #main_content के पास कंटेनर DIV में पूरी उपलब्ध चौड़ाई है। इसके अतिरिक्त, आप
तत्व को #main_content DIV में ले जा सकते हैं और इसके CSS को इस प्रकार सेट कर सकते हैं:

.clear {
  clear: both;
}

फ्लेक्सबॉक्स का उपयोग कर वैकल्पिक समाधान

एक अधिक आधुनिक विकल्प फ्लेक्सबॉक्स का उपयोग करना है, एक CSS3 लेआउट मोड जो लचीला और उत्तरदायी लेआउट सक्षम करता है। इस दृष्टिकोण में, निम्नलिखित सीएसएस नियम लागू किए जा सकते हैं:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

फ्लेक्सबॉक्स का उपयोग कर HTML संरचना:

  

     Header   
    
  

    Content
  

उपरोक्त फ्लेक्सबॉक्स दृष्टिकोण एक प्रतिक्रियाशील लेआउट बनाता है जहां सामग्री अनुभाग अपने आंतरिक तत्वों की ऊंचाई के अनुरूप उपलब्ध ऊर्ध्वाधर स्थान को भरने के लिए स्वचालित रूप से विस्तारित होगा।