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 stays at the bottom of the viewport?
Asked on Feb 12, 2026
Answer
To create a sticky footer that remains at the bottom of the viewport, you can use CSS Flexbox to structure your layout. This approach ensures that the footer sticks to the bottom even when the content is not enough to fill the page.
<!-- BEGIN COPY / PASTE -->
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
<div class="content">
<!-- Main content goes here -->
</div>
<div class="footer">
Sticky Footer Content
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The
bodyandhtmlelements are set to 100% height to allow Flexbox to manage the layout. - The
.contentclass usesflex: 1;to expand and fill the available space, pushing the footer to the bottom. - The
.footerclass remains at the bottom due to the Flexbox column layout. - This method ensures the footer is always visible at the bottom, regardless of the content height.
Recommended Links:
