CSS
Full-Height Layout with Sticky Footer using CSS Grid
Implement a robust, full-height page layout where the footer sticks to the bottom, even with minimal content, using CSS Grid for elegant structure.
html, body {
height: 100%;
margin: 0;
}
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Main Content (grows), Footer */
min-height: 100vh; /* Ensures container takes full viewport height */
font-family: sans-serif;
}
.header {
background-color: #f8f8f8;
padding: 15px;
text-align: center;
}
.main-content {
padding: 20px;
background-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
How it works: This CSS Grid configuration creates a full-height page structure with a 'sticky' footer. The `grid-template-rows: auto 1fr auto` property is key: `auto` allocates space based on content for the header and footer, while `1fr` allows the main content area to expand and fill all remaining vertical space, effectively pushing the footer to the bottom of the viewport even when content is sparse. `min-height: 100vh` on the container ensures it always spans the full viewport height.