CSS
Flexbox: Create a Sticky Footer Layout
Implement a common sticky footer pattern using Flexbox to ensure the footer always stays at the bottom of the viewport, even with sparse content, enhancing user experience.
<body class="flex-page">
<header>Header Content</header>
<main>Main Content</main>
<footer>Footer Content</footer>
</body>
.flex-page {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensure the body takes full viewport height */
}
header, footer {
background-color: #f0f0f0;
padding: 1rem;
text-align: center;
}
main {
flex-grow: 1; /* Allows main content to take up all available space */
padding: 1rem;
text-align: center;
background-color: #e0e0e0;
}
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 content is stacked vertically and fills the viewport. The `flex-grow: 1` property on the `main` element ensures it expands to consume all available vertical space, pushing the `footer` to the bottom of the page regardless of the amount of content in `main`.