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

`position: fixed; bottom: 0; left: 0; right: 0; height: 50px`? — Christian, Nov 28 '12 at 15:50
Some mobiles, ie older versions of iOS, don't respect the `fixed` property. But give it a go anyway :) — Christian, Nov 28 '12 at 15:54

score 65 · Accepted Answer · answered Nov 28 '12 at 15:52

65

Yes. It's the position: fixed property.

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

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

answered Nov 28 '12 at 15:52

Christian

19,605
3
54
70

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? – Piotr Ciszewski Nov 28 '12 at 16:00
`position: fixed;` is how you make the element stay in place as you scroll. – Edward Apr 09 '17 at 18:45
1

stocking on mid of screen, android 8 chrome – Shiv Singh Jan 20 '18 at 06:02
3

It stays fixed, but if your content is taller than the viewport, the bottom 50px of the content is obscured by the footer – CodeThug Jun 29 '18 at 06:07
1

your css has a fatal flaw. If you add content to the page, the floating footer hides the bottom content – Omar Mar 02 '21 at 08:05

score 3 · Answer 2 · answered Dec 03 '13 at 14:59

3

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

answered Dec 03 '13 at 14:59

Sam Jones

4,443
2
40
45

score 1 · Answer 3 · answered May 26 '15 at 01:58

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>

Perfect for my requirement: show footer when content is short, and put footer at bottom when content is longer than window — miao.wang, Nov 30 '17 at 20:28

brax7 · Answer 4 · 2018-05-15T20:46:28.207

0

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

edited May 15 '18 at 20:46

answered May 15 '18 at 20:40

brax7

182
2
7

Jeroen · Answer 5 · 2018-01-10T15:48:00.107

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.

floating footer always on the bottom and visible

5 Answers5