CSS
Sticky Footer with Flexbox
Implement a 'sticky footer' that always stays at the bottom of the viewport even with minimal content, using a simple and effective CSS Flexbox technique.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main-content {
flex-grow: 1;
}
.header { background-color: #f1f1f1; padding: 20px; text-align: center; }
.footer { background-color: #f1f1f1; padding: 20px; text-align: center; }
/* Basic HTML Structure for context:
<body>
<header class="header">Header</header>
<div class="main-content">Your page content goes here. If content is short, footer sticks to bottom. If content is long, footer pushes down.</div>
<footer class="footer">Footer</footer>
</body>
*/
How it works: This snippet solves the classic 'sticky footer' problem where the footer should always be visible at the bottom of the viewport, even if the page content is short. By making the `body` a flex container with `flex-direction: column` and setting its `min-height` to `100vh`, the main content area (`.main-content`) can then be given `flex-grow: 1`. This allows the main content to take up all available vertical space, pushing the footer to the very bottom of the viewport without needing fixed positioning or complex calculations.