CSS
Implement a Sticky Footer with CSS Grid for Full-Height Layouts
Master the creation of a sticky footer that always stays at the bottom of the viewport using CSS Grid, ensuring your content fills the screen gracefully.
html, body {
margin: 0;
padding: 0;
height: 100%; /* Ensure html and body take full height */
}
.page-container {
display: grid;
/* Define rows: auto for header, 1fr for main content (grows to fill space), auto for footer */
grid-template-rows: auto 1fr auto;
min-height: 100vh; /* Make sure the container is at least full viewport height */
}
header {
background-color: #e9ecef;
padding: 20px;
text-align: center;
}
main {
background-color: #ffffff;
padding: 20px;
/* Content will naturally push the footer down if it overflows 1fr */
}
footer {
background-color: #343a40;
color: white;
padding: 15px;
text-align: center;
}
How it works: This code demonstrates a clean and modern way to implement a 'sticky footer' using CSS Grid. By setting `display: grid` on the main page container and defining `grid-template-rows: auto 1fr auto`, we create three rows: the header (takes content height), the main content area (takes all remaining available space due to `1fr`), and the footer (takes content height). Crucially, `min-height: 100vh` on the container ensures it always occupies at least the full viewport height, guaranteeing the footer sticks to the bottom even with minimal content.