Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I use CSS to create a sticky footer that always stays at the bottom of the viewport?
Asked on Feb 18, 2026
Answer
To create a sticky footer that remains at the bottom of the viewport, you can use a combination of CSS Flexbox and viewport height units. This ensures the footer stays at the bottom even if the content is short.
<!-- BEGIN COPY / PASTE -->
<style>
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
<div class="container">
<div class="content">
<!-- Main content goes here -->
</div>
<div class="footer">
<!-- Footer content goes here -->
Sticky Footer
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The `html` and `body` elements are set to 100% height to ensure the entire viewport is utilized.
- The `.container` uses Flexbox to arrange its children in a column, with `.content` taking up the available space.
- The `.footer` stays at the bottom due to the `flex: 1` property on `.content`, which pushes the footer down.
- This method is responsive and works well across different screen sizes.
Recommended Links:
