CSS
Creating a Sticky Footer with Flexbox
Implement a sticky footer that consistently stays at the bottom of the viewport, pushing content above it to fill available space using Flexbox layout.
/* HTML Structure */
<body>
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</body>
/* CSS */
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
padding: 20px;
background-color: #f0f0f0;
}
header, footer {
padding: 15px;
background-color: #333;
color: white;
text-align: center;
}
How it works: This Flexbox technique creates a "sticky" footer that always remains at the bottom of the viewport, even when there's minimal content. By setting the `html` and `body` height to 100%, and making the `body` a flex container with `flex-direction: column`, we can then apply `flex-grow: 1` to the main content area. This ensures the main content expands to fill all available space between the header and footer, pushing the footer down.