jQuery to stick the footer to the bottom of the page

Question

I've spent ages trying to use CSS to stick my footer to the bottom of my page, and have just about given up.

What I want is for the footer to have no extra CSS properties assigned if the height of the viewport is less than the height of the HTML document.

If the document height is less than the window height, I want the following CSS assigned to div#thefooter:

position: fixed;
bottom: 0px;
margin-left: -5px;

So here's my JS code. It does nothing, and the console log shows nothing.

$(document).ready(function(){

  $(window).bind("load", function(){ putFooter(); });
  $(window).resize(function(){ putFooter(); });

  function putFooter(){
    var wh = $(window).height();
    var dh = $(document).height();
    if(dh < wh) {
      $("#thefooter").css({"position": "fixed", "bottom": "0px", "margin-left": "-5px"});
      }
    }

});

EDIT: and here's what my HTML looks like:

<div id="allexceptfooter">
  <div id="themenu">...</div>
  <div id="actualcontent">...</div>
</div>
<div id="thefooter">...</div>

If you want to see the whole thing my website is duncannz .com

You can combine the three `.css(...)` parts into one by using an object `.css({"position": "fixed", "bottom": "0px", "margin-left": "-5px"})` — Andreas, Jun 09 '12 at 21:23

score 5 · Answer 1 · answered Jun 09 '12 at 21:22

5

Check this out, no javascript needed at all...

http://www.cssstickyfooter.com

answered Jun 09 '12 at 21:22

alt

13,357
19
80
120

@DuncanNZ don't lose hope, it finally worked for me after many many tries in the past :) – Jaime Hablutzel Dec 31 '13 at 02:32

score 1 · Accepted Answer · 2012-06-21T05:34:07.070

OK I've got it. Not with CSS - I've already spent ages trying with that.

But I have the jQuery working. The problem was that $(document).height(); was returning the height of the viewport, since I use body{ height: 100%; } in my CSS. The answer was to use this HTML:

<body>
<div id="everything">
...
</div>
</body>

and use $("#everything").height(); instead of $(document).height();. Still requires JS unfortunately, but better than nothing. No CSS solution worked for me.

EDIT AGAIN: Here's the again-updated code:

$(document).ready(function(){

  function putFooter(){
    var wh = $(window).height();
    var dh = $("#everything").height();
    if(dh < wh - 104) { /*104: #thefooter height in px*/
      $("#thefooter").addClass("footerissticky");
      }
    else {
      $("#thefooter").removeClass("footerissticky");
      }
    }

  putFooter();
  $(window).bind("load", function(){ putFooter(); });
  $(window).resize(function(){ putFooter(); });

});

and the CSS:

.footerissticky{
  position: fixed;
  bottom: 0px;
  width: 870px;
}

score 0 · Answer 3 · answered Jun 09 '12 at 21:23

0

You can avoid Javascript at all using this technique:

http://ryanfait.com/sticky-footer/

answered Jun 09 '12 at 21:23

MaxArt

22,200
10
82
81

I've also tried that heaps but just can't get it to work with my website. – Jun 09 '12 at 21:24
Well maybe you should explain what your page has so you can't use it. Maybe some HTML code? – MaxArt Jun 09 '12 at 21:29
Added HTML code to question. If you want to see the whole thing the website is www . duncannz . com – Jun 09 '12 at 21:32

score 0 · Answer 4 · edited May 23 '17 at 10:26

0

JQuery has added data-position="fixed" to solve this. Answered in - jQuery Mobile: Stick footer to bottom of page

edited May 23 '17 at 10:26

Community

1
1

answered Aug 18 '14 at 20:40

Brendenw

785
1
6
22

jQuery to stick the footer to the bottom of the page

4 Answers4