floating footer always on the bottom and visible

Question

I have a website like this one: >> website <<. It is built from 2 frames - main and a footer. I was trying to get it working without frames (don't work on mobile phones). Is there any simple CSS or jQuery method to stick the footer on the bottom to be visible always? so the effect is like on the website above? I was trying to use css, but the footer appears only when I scroll down to it. I want the footer to cover the actual content, so it's always for example 50pixels high and is always visible on the bottom of the screen. even if the page is 10000px high. I believe it's something simple, but I got lost somewhere there. Thank you for your help in advance

Jandel

position: fixed; bottom: 0; left: 0; right: 0; height: 50px? – Fumy

Some mobiles, ie older versions of iOS, don't respect the fixed property. But give it a go anyway :) – Fumy

Answer 1

Yes. It's the position: fixed property.

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Demo: http://jsfiddle.net/ZsnuZ/

Fumy

on my android it actually freezes in the weird position, so I scroll down and it stays in the middle of the screen... any thoughts? – Jandel

position: fixed; is how you make the element stay in place as you scroll. – Saprophagous

stocking on mid of screen, android 8 chrome – Orangewood

It stays fixed, but if your content is taller than the viewport, the bottom 50px of the content is obscured by the footer – Hiding

your css has a fatal flaw. If you add content to the page, the floating footer hides the bottom content – Nighthawk

Answer 2

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

Gunwale

Answer 3

Continuing on from Sam Jones:

Basically this checks to see if the height of the document will fill the window, if it is less than the window, it will attach to the bottom of the window, if the document is larger than the window size it will attach to the bottom of the document (so it is only visible when you scroll to the bottom).

If you resize the window it will recalculate and everything should work properly!

CSS

#footer {
  bottom: 0px;
}

HTML

<div id="footer">
  Footer content
</div>
<script>
  var footerResize = function() {
    $('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
  };
  $(window).resize(footerResize).ready(footerResize);
</script>

Eton

Perfect for my requirement: show footer when content is short, and put footer at bottom when content is longer than window – Huppert

Answer 4

We can even compare the heights and set the footer at the bottom using below code.

 $(document).ready(function(){
    if($("body").height() < $(window).innerHeight()) {
                    $('#footer').css('position','fixed');
                    $('#footer').css('bottom',0);
    }
 });

Gourami

Answer 5

For me this works better, because body height includes the footer when position is static or inherit:

   var footerResize = function() {
            if ($('#footer').css('position') == "fixed")
                $('#footer').css('position', $("body").height() + $("#footer").height() > $(window).innerHeight() ? "inherit" : "fixed");
            else
                $('#footer').css('position', $("body").height() > $(window).innerHeight() ? "inherit" : "fixed");

};

It stays on the bottom when growing the window now.

Scrubber