Tom Hammond Tom Hammond - 1 month ago 10
CSS Question

Footer on bottom but not sticky

I'm trying to get a footer to flush to the bottom of the page, but not necessarily be sticky - just be at the bottom in case the user scrolls down there.

This "works" but there seems to be a bit of white space at the bottom after the footer appears which looks a little awkward. Does anyone know the best way with CSS to flush a footer to the bottom and keep it at the very bottom without making it sticky?

Let me know if you want me to post my html/css.

Answer Source

There are a number of good examples on the web of this.

Here is a supposedly updated version: http://mystrd.at/modern-clean-css-sticky-footer/ ; I have no experience with this one.

And this is the classic version that has been around for a long time and well used by many:

http://www.cssstickyfooter.com/html-code.html

Here's my own slightly edited version of the second link that I've had good luck with.

/* Sticky Footer Stuff
 */
html,body { height: 100%; }
#sticky-wrap { min-height: 100%; }
.footer {
     height: 160px;
     margin-top: -160px;
}
/* end sticky footer stuff
 */


<div class="wrapper" id="sticky-wrap">
     <div class="content-area”>
     </div>
</div>
<footer>
</footer>