CODEWITHSUNDEEP
htmlcss
Tom Hammond
Tom Hammond

Reputation: 6090

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.

Upvotes: 3

Views: 2614

Answers (2)

JakeParis
JakeParis

Reputation: 11210

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 (waybackmachine archived)

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>

Upvotes: 2

Haim
Haim

Reputation: 69

I've had a similar issue. I always wanted my footer to be at the bottom of the page, but never overlap the other div's.

The best solution I came up with was :

CSS

#footer { 
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
@media screen and (max-height: 700px) {
  #footer {
    position: relative;
  }
}

HTML

<div id="footer"></div>

This will keep the footer always on the bottom of min-height 701px, and below that it will be at the bottom relative to other divs. Of course you can change the parameters and set it to your own pixel measurements.

Hope this helps.

Upvotes: 0

Related Questions