CSS
Create a Sticky Footer with CSS Flexbox
Implement a robust sticky footer using CSS Flexbox, ensuring your footer always stays at the bottom of the viewport even with minimal content, without relying on fixed positioning.
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Make body take full viewport height */
margin: 0;
}
.content-wrapper {
flex: 1; /* Allows this div to grow and push the footer down */
padding: 20px;
background-color: #f0f0f0;
}
footer {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
/* HTML Structure */
/*
<body>
<div class="content-wrapper">
<h1>Main Content</h1>
<p>This is where your main page content goes.</p>
<p style="margin-top: 500px;">More content below to illustrate sticky behavior on short pages.</p>
</div>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
*/
How it works: This snippet provides a reliable method to create a "sticky footer" that remains at the bottom of the viewport. By setting `body` to `display: flex` with `flex-direction: column` and `min-height: 100vh`, the body becomes a flex container spanning the full viewport height. The `.content-wrapper` element is given `flex: 1`, allowing it to grow and occupy all available vertical space, effectively pushing the `footer` to the very bottom. If content exceeds the viewport height, the footer will simply follow the content.