How do I create a "sticky" footer?

Question

After researching pure CSS ways to "sticky" my footer, I am at a loss. Here is the structure of the layout on my site:

<html> 
<body class="pages">
<div id="global" class="global">
<div class="pusher">

<header class="fixed"></header>
<section id="content"></section>
<div id="footerbottom"></div>

</div>
</div>
</body>
</html>

What I have tried with some success is adding

min-height: 100vh;

to the "content" section, but it's still not good enough.

Any suggestions to make the <div id="footerbottom"></div> stick to the bottom?

Do you want it to always appear at the bottom of the screen, even when the page is longer than the screen? — jianweichuah, Dec 19 '15 at 02:31
No, if there is enough content, the user can scroll to the bottom to find the footer. It doesn't have to float, if that makes sense. — user2525253, Dec 19 '15 at 02:33
Here's an example of a page with a sticky footer, made my Bootstrap http://getbootstrap.com/examples/sticky-footer/ drill into their code and see how they did this. — justincron, Dec 19 '15 at 07:25

marcanuy · Answer 1 · 2015-12-19T02:47:30.767

1

You could use pure CSS with: position: absolute and bottom:0px.

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 150px;
}
#footerbottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 150px;
    width: 100%;
    background-color:red;
    text-align:center;
}

Here is the fiddle: http://jsfiddle.net/X2NqX/332/

Or a framework like Bootstrap makes it easy: https://getbootstrap.com/examples/sticky-footer/

edited Dec 19 '15 at 02:47

answered Dec 19 '15 at 02:36

marcanuy

23,118
9
64
113

Just tried this -- the footer overlaps on the content, and if I draw the browser bigger vertically, there is white space under the footer. – user2525253 Dec 19 '15 at 02:40
I've updated the fiddle with the relative html position, try it again it should work. – marcanuy Dec 19 '15 at 02:41
The fiddle checks out, but for some reason it's not working like that on my site. I'll have to debug this. – user2525253 Dec 19 '15 at 02:56

score 0 · Answer 2 · answered Dec 19 '15 at 03:05

This is a really common problem we all come across; I do invite you to have a look at this http://ryanfait.com/sticky-footer/

Know you will have to reformat you're whole html but till now I do think it is the best solution.

Or eventually as said before you could use Bootstrap solution which is -for my concern- not really optimised for every case but could work in yours.

score 0 · Answer 3 · answered Dec 19 '15 at 03:11

Try this out. I think it's a better solution than using absolute positioning especially when making a responsive site.

<body class="pages">
   <div id="global" class="global">
     <header class="fixed"></header>
     <section id="content"><p>
       content<br>
       content
     </p></section>
   </div><!--end global-->

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

</body>

CSS:

html, body {
  height: 100%;
}

#global {
  min-height: 100%;
}

#content {
  overflow:auto;
    padding-bottom: 150px;  /* must be same height as the footer */
}

#footerbottom, #global:after {
  height: 100px; 
}

#global:after {
  content: "";
  display: block;
}

#footerbottom {
  background: red;
  position: relative;
  margin-top: -100px; /* negative value of footer height */
  height: 100px;
  clear:both;
}

Check out the fiddle here: https://jsfiddle.net/tpbt60ff/

Better explanation here: http://www.cssstickyfooter.com/using-sticky-footer-code.html

IMHO the other solution is cleaner, this solution also uses px instead of %, where is the responsive advantage? Bottom is always bottom, even in responsive sites ;) — marcanuy, Dec 19 '15 at 03:29

How do I create a "sticky" footer?

3 Answers3