CODEWITHSUNDEEP
javascriptjquerycss
user1318194
user1318194

Reputation:

jQuery to stick the footer to the bottom of the page

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

Upvotes: 0

Views: 7572

Answers (4)

Brendenw
Brendenw

Reputation: 835

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

Upvotes: 0

user1318194
user1318194

Reputation:

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;
}

Upvotes: 1

MaxArt
MaxArt

Reputation: 22617

You can avoid Javascript at all using this technique:

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

Upvotes: 0

alt
alt

Reputation: 13907

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

http://www.cssstickyfooter.com

Upvotes: 5

Related Questions