CSS और HTML से मुख्य कंटेंट div को स्क्रीन ऊंचाई भरना

परिचय

मुख्य कंटेंट क्षेत्र को व्यूपोर्ट ऊंचाई भरने के लिए, हेडर/फूटर के बाद शेष स्थान लेना।

विधि 1: Absolute Positioning (पुराना लेकिन काम करता है)

.mainbody {
    position: absolute;
    top: 60px;       /* हेडर ऊंचाई */
    bottom: 40px;    /* फूटर ऊंचाई */
    left: 0;
    right: 0;
    width: 100%;
    overflow: auto;  /* कंटेंट अधिक होने पर स्क्रॉल */
}

/* HTML संरचना */
<header style="height: 60px; position: fixed; top: 0; width: 100%;">हेडर</header>
<main class="mainbody">मुख्य कंटेंट</main>
<footer style="height: 40px; position: fixed; bottom: 0; width: 100%;">फूटर</footer>

विधि 2: Flexbox (आधुनिक, अनुशंसित)

<style>
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* व्यूपोर्ट ऊंचाई */
}

header, footer {
    flex-shrink: 0;  /* सिकुड़ने न दें */
}

main {
    flex: 1;         /* शेष स्थान ले */
    overflow: auto;  /* आंतरिक स्क्रॉल */
}
</style>

<div class="page-container">
    <header>हेडर (ऊंचाई स्वचालित)</header>
    <main>मुख्य कंटेंट - फ्लेक्स से भरता है</main>
    <footer>फूटर (ऊंचाई स्वचालित)</footer>
</div>

विधि 3: CSS Grid

<style>
.page-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;  /* हेडर, मुख्य, फूटर */
    min-height: 100vh;
}

main {
    overflow: auto;
}
</style>

<div class="page-grid">
    <header>हेडर</header>
    <main>मुख्य कंटेंट</main>
    <footer>फूटर</footer>
</div>

विधि 4: calc() के साथ

<style>
header { height: 60px; }
footer { height: 40px; }

main {
    height: calc(100vh - 100px);  /* 100vh - (हेडर + फूटर) */
    overflow: auto;
    box-sizing: border-box;
}
</style>

तुलना

सिफारिश

Flexbox सबसे अच्छा संतुलन प्रदान करता है: डायनामिक हेडर/फूटर ऊंचाई, उत्कृष्ट ब्राउज़र सपोर्ट, सरल कोड।