CSS
Create a Sticky Footer Layout with CSS Flexbox
Implement a classic sticky footer design using CSS Flexbox, ensuring your footer always stays at the bottom of the viewport for short content and pushes down with long content.
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures the body takes full viewport height */
}
main {
flex-grow: 1; /* This is the key: main content takes up all available space */
padding: 20px;
background-color: #f9f9f9;
}
footer {
padding: 20px;
background-color: #333;
color: white;
text-align: center;
}
How it works: This technique ensures the footer always 'sticks' to the bottom of the viewport if the page content is shorter than the viewport height, and correctly pushes down below the content if the content is long. By setting `html` and `body` to `height: 100%` and `body` to `min-height: 100vh` with `display: flex` and `flex-direction: column`, the body becomes a vertical flex container spanning the entire viewport. Giving the `main` content area `flex-grow: 1` makes it expand to fill all available space, pushing the `footer` to the very bottom.