CSS
Flexbox Sticky Footer Layout
Create a robust sticky footer that always stays at the bottom of the viewport, even with minimal content, using CSS Flexbox for a clean, semantic layout.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex: 1; /* This pushes the footer down */
}
footer {
background-color: #f2f2f2;
padding: 1rem;
text-align: center;
}
/* Example HTML Structure */
/*
<body>
<header>Header Content</header>
<main>
<!-- Your main page content goes here -->
<p>Some content...</p>
<p>More content...</p>
</main>
<footer>Footer Content</footer>
</body>
*/
How it works: This snippet demonstrates how to create a sticky footer using Flexbox. By setting the `body` to `display: flex` with `flex-direction: column` and `min-height: 100vh`, the main content area is allowed to grow (`flex: 1`) to fill any available space, pushing the footer to the bottom of the viewport. This ensures the footer remains at the very bottom, regardless of content length.