CSS
Create a Sticky Footer with Flexbox
Learn how to implement a classic sticky footer layout using CSS Flexbox, ensuring the footer always stays at the bottom of the viewport regardless of content length.
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensure body takes at least full viewport height */
margin: 0;
}
header,
footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
main {
flex-grow: 1; /* Allows main content to take up all available space */
padding: 1rem;
background-color: #f4f4f4;
}
/* Basic HTML structure for context */
/*
<header>Header</header>
<main>Main Content (can be short or long)</main>
<footer>Footer</footer>
*/
How it works: This snippet demonstrates how to create a 'sticky footer' using Flexbox. By setting the `body` to `display: flex` and `flex-direction: column`, its children (header, main, footer) are stacked vertically. `min-height: 100vh` ensures the body occupies the full viewport height. The magic happens with `flex-grow: 1` on the `main` element, which makes it expand to fill any available vertical space, pushing the `footer` to the bottom of the viewport even if the content is minimal.