CSS
Implement a Sticky Footer for Full Page Layouts
Create a web page layout where the footer 'sticks' to the bottom of the viewport, even with minimal content, using Flexbox for robust positioning.
html, body {
height: 100%; /* Important for min-height to work */
margin: 0;
}
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures wrapper is at least viewport height */
}
.header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.main-content {
flex-grow: 1; /* Pushes footer to the bottom */
padding: 20px;
background-color: #f9f9f9;
}
.footer {
background-color: #eee;
padding: 15px;
text-align: center;
border-top: 1px solid #ccc;
}
How it works: This snippet demonstrates how to create a 'sticky footer' layout using Flexbox. By setting `min-height: 100vh` on the `.page-wrapper` and `flex-direction: column`, the content is stacked vertically. The crucial part is applying `flex-grow: 1` to the `.main-content` element. This allows it to expand and occupy all available vertical space, effectively pushing the `.footer` to the very bottom of the viewport, or below the content if the main section overflows the viewport height.