Tom Hammond Tom Hammond - 7 months ago 39
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: ; 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:

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”>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download