CSS
Implement a Sticky Footer Layout Using CSS Flexbox
Ensure your footer always stays at the bottom of the viewport, even when content is short, by leveraging CSS Flexbox for a robust and clean sticky footer solution.
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Make body at least full viewport height */
margin: 0;
}
.header {
background-color: #f8f8f8;
padding: 15px;
text-align: center;
}
.content {
flex-grow: 1; /* This makes the content take up all available space */
padding: 20px;
background-color: #fff;
}
.footer {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
<!-- HTML Structure -->
<body class="page-container">
<header class="header">
<h1>My Awesome Site</h1>
</header>
<main class="content">
<p>This is the main content area.</p>
<p>If there's not much content, the footer will still stick to the bottom.</p>
</main>
<footer class="footer">
© 2023 My Company
</footer>
</body>
How it works: This snippet demonstrates a classic sticky footer using Flexbox. By setting `display: flex` and `flex-direction: column` on the `body` (or a main page container) and giving it `min-height: 100vh`, the `main` content area can then be given `flex-grow: 1`. This allows the content to expand and push the footer to the bottom, ensuring it always stays visible at the page's base, regardless of content length.