Responsive CSS Sticky Footer

Responsive CSS Sticky Footer


In this video we’re
going to look at a trick to achieve a responsive sticky
footer, which is usually quite difficult. So here you can see I’ve
got some content just in my body of my
page, or my wrapper, and I’ve got some content
in the footer, as well. So as I pull this in, you
can see that not only does the footer fall down
with the content, it also does respond nicely,
so it’s not obviously not a fixed height footer. So this is extremely easy
to do, so let’s go ahead and look at how we do this. So we’ll go ahead and
write the markup first. You can see I’ve got a basic
document laid out here, and I’ve got a main.css
style sheet linked in with nothing in at the moment. So the first thing we want
to focus on is the wrapper. So this is just where all
of your content will go. If you’re incorporating this
into your website as it is, you may need to change
things around here. But this is generally how
things are going to work. So I’m gonna say
this is the content, and we’ll also have
a footer down here. This doesn’t need to be
a HTML5 footer element. It can be whatever you want. And inside of here, as well,
we’ll create a wrapper. The reason we’re
going to do this is we need to add some
padding to this. We won’t be able to add
padding to the footer. We’ll see why in a moment. So I’m just going to
say this is a footer. OK, so what we’re gonna do
now is over on main.css, we’re going to apply some
styles to the HTML and the body, and the first thing
I’m going to do is set the margins to zero,
just so everything sorts of sits back in its place like this. And we also want to
do a few hacky things, and this is a very hacky
solution, but it works. So I’m going to set the
display type of the HTML body as a table. I’m going to set
the height to 100%, and I’m going to set the
width to 100% as well. Now, let’s fill in
our wrapper stars, and let’s also fill in
some some footer stars. In the footer
specifically, I’m just going to change the background
color to slate gray, and for the wrapper I’m going to
give that the 20 pixels padding I spoke about a moment ago. So that now gives
us this, so we can start to work on
pulling this footer down to actually make it sticky. So with the wrapper, we want
the height to be auto here. And this isn’t going to do much,
but in a minute, what we’re going to do is we’re going to
change the actual footer to be a table row. And this is part of
the hack, really. We’re working with tables here,
although it does seem odd. We are typically using
the CSS properties. We’re not actually
marking up tables here, so personally I don’t see a
problem with this solution. So we’re going to set the
display type of the footer to a table row, and I’m
going to set the height here to one pixel. So now what we’re
going to see is we’re going to see this
literally just stick to the bottom. And the benefit to this is that
obviously as we add more markup here, this is going
to be responsive. Say, for example, we were to
add a couple of lorem ipsum paragraphs just
here, and we were to do the same in the footer. Maybe just a few this time. Then we can had over here, and
the first thing that we notice is that all of our content
in our main wrapper, or main section,
whatever, however you’re gonna mark this
out, will push down the footer, which
is what we expect. We don’t want it to overlap,
or anything like that. And second of all, you’ll see
that the height of the footer has increased. And in actual fact,
when we pull this in, the height increases even
more to take into account the height pushing
from the content. So that’s pretty much it. It’s really easy to
do, and quite clean. No sort of extra
markup required, like you see sometimes we
get push class, or push ID being added in
our markup somewhere. This just allows you
to keep your markup to an absolute minimum. So that’s how we create a
responsive sticky footer with CSS.

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
    Aman Deep

    Could you please make a tutorial on how to center an element vertically in a parent div without loosing the responsiveness. Been struggling with it but no help yet!

  5. Post
    Author
  6. Post
    Author
    Arnes Arnautović

    Thank you! I've tried many sticky footer solutions and had mixed results. How does this solution holds against older browsers like the all-hated IE6?

  7. Post
    Author
  8. Post
    Author
    James

    Thank you for this Alex, all of your tutorials are terrific! Just wondering how long have you been a developer for?

  9. Post
    Author
  10. Post
    Author
    Prashant Jha

    God bless you dude…Thank you…u have no idea what a wonder you have done to my project…..i was going nuts trying to get a responsive sticky footer…and after watching this video just "display: table;" solved all my issues….i usually don comment on any of the blogs on videos, but for you i just cannot control myself…Thank you so much…

  11. Post
    Author
    Gert Kommer

    I tried this and got stuck at the child elements of the divs. This is my html and css http://jsfiddle.net/zGzGZ/1/. Why do the .header and the .footer div only cover the first cell when I have only specified the display: table-cell; in my .body div?

  12. Post
    Author
    tran hoai nam

    thanks man, but could you please make a tut about display property. That is very hard to understand the diffirent between display:table-row, cel … And thanks again, very great video.

  13. Post
    Author
  14. Post
    Author
    Vlad Andreev

    Hello! Help me please. Why It think doesn't work? I understood that this footer must stick in the bottom of page but I wrote everything as you and if text is short in the first wrapper, footer is going to the top of page. I tried it in Firefox 30 and Safari.

  15. Post
    Author
  16. Post
    Author
    Peshyy

    Awesome tutorial, I used it in 2-3 projects already.. but today as I "implemented" into another one, it failed to stick it to the bottom.. when refreshing, it sticks and then instantly moves up a bit.. then I solved the issue by excluding jQuery from the project.. that's strange.. do you know why jQuery is causing this not to work ?

  17. Post
    Author
    Jack Kinsey

    Awesome! It is amazing how difficult it can be to make a footer behave properly. It always trips me up. My current solution works for fixed-size footers but I like this much more! Thanks for the tip!

  18. Post
    Author
  19. Post
    Author
  20. Post
    Author
  21. Post
    Author
  22. Post
    Author
  23. Post
    Author
    Olive Live

    Got same problem as Fábio, if anyone has a clue, it would be welcome. For the rest it works perfectly !!! Thanks Alex 🙂

  24. Post
    Author
  25. Post
    Author
  26. Post
    Author
  27. Post
    Author
    Luiz Baima

    hello

    I have a webradio with this website in Joomla. My player is in a separate iframe which is bad. I wonder if it would have put my player in footer through an iframe?

    Best Regards

  28. Post
    Author
    brazil004

    Would it be possible to create a sticky footer by using a javascript to find the users screen size and then use that to get the height of the body just right in order to keep the footer at the bottom of the screen?

  29. Post
    Author
    brazil004

    What code is that, that you are using to generate lipsum text? p*10>lipsum? It doesn't do anything when I type it in and I cannot find mention of it anywhere.

  30. Post
    Author
    daPerley

    Hi Alex, great video that made my last project so much easier, just wondering if there's any possibllity to add a margin between the footer and the content when using this or do I need to create a "<div class="footer">" to be able to do that?

  31. Post
    Author
    Johvan Wyke

    I have been searching all over for something like this. I knew I should of came here first. Thanks a lot man; keep up the good work.

  32. Post
    Author
    Perly X

    Great code, is there any possibility to add a top shadow to only the footer and not the wrapper? I've been playing around for a while with out any results

  33. Post
    Author
    ur mum gay

    Wtf it didn't work heres all my code:

    body {

    margin:0;

    display:table;
    height:100%;
    width:100%;

    }

    .wrapper {
    padding:20px
    height:auto;

    }

    footer {
    background-color:slategrey;
    display:table-row;
    height:1px;

    }

    (ENDS HERE)

    ok so im not quite sure why it dosen't work.

  34. Post
    Author
  35. Post
    Author
    Peggy Trudell

    Just like one person below, why does this not work for me?? I have the same code as you…I think?

    body {
    margin: 0px;
    display: table;
    height: 100%;
    width: 100%;
    }
    .wrapper {
    padding: 20px;
    height: auto;
    }
    footer {
    background-color:#E01417;
    display: table-row;
    height: 1px;
    }
    </style>
    </head>

    <body>

    <div class="wrapper">
    This is the content.
    </div>
    <footer>
    <div class="wrapper"> This is a footer.</div>
    </footer>
    </body>

  36. Post
    Author
  37. Post
    Author
  38. Post
    Author
  39. Post
    Author
    Agayla Tech

    Great tutorial. Just out of curiosity, how did you do the multiple lorems so fast? Tried it in Sublime text, but didn't work. Is there a package I need to install?

  40. Post
    Author
  41. Post
    Author
    Brian FitzGerald

    This is a great way to accomplish it. Worked for me across the mobile devices I needed to support. THANK YOU man, saved me a lot of trouble today in crunch time.

  42. Post
    Author
  43. Post
    Author
  44. Post
    Author
  45. Post
    Author
    Luis Miranda

    like the video but is not a sticky. surchingfor a kind of overlaping the body whilist you dont reach the bottom, but when you reach the bottom you should be able to see the the bottom of the body with no overlaping, in worse case cenário the footer being 30% nad the body 70% both with their own scrool bar could you help.

  46. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *