निश्चित-ऊंचाई हेडर और फुटर को छोड़कर शरीर की ऊंचाई के 100% पर कब्जा करने के लिए एक सामग्री प्रभाग कैसे सेट करें

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

HTML संरचना में एक हेडर, एक सामग्री div और एक पाद लेख शामिल है। सीएसएस में, हम यह सुनिश्चित करके शुरू करते हैं कि HTML और बॉडी तत्वों की न्यूनतम ऊंचाई 100% हो और कोई मार्जिन या पैडिंग न हो।

html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

सामग्री क्षेत्र की स्थिति के लिए, हम एक #wrapper div पेश करते हैं जो पूर्ण स्थिति का उपयोग करके पूरे व्यूपोर्ट को फैलाता है।

#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#wrapper के अंदर, हम सामग्री div (#content) को न्यूनतम 100% ऊंचाई के साथ परिभाषित करते हैं। यह सुनिश्चित करता है कि यह संपूर्ण उपलब्ध स्थान को भरता है।

#content {
  min-height: 100%;
}

हेडर और फुटर की ऊंचाई को ध्यान में रखते हुए, हम उन्हें ऑफसेट करने के लिए नकारात्मक मार्जिन का उपयोग करते हैं।

header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}

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