Stick a footer to the bottom of the page

Question

How do I make a footer which will stick to the bottom of the page and that will move with my content? I tried using position, but when there was more content than would fit on the screen, the footer stayed at the bottom of the screen, with content overlaying on top of it.

This is duplicated here: http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly - Did you Google this? — Sinister Beard, Nov 07 '13 at 09:14
Why Why Why after so many faq and help topics why come up with an incomplete question . We cannot build an entire page sitting here . — Anobik, Nov 07 '13 at 09:15

score 0 · Answer 1 · answered Nov 07 '13 at 09:15

I would make css class for footer -

footer.bottom {
    position: fixed;
    bottom: 0px;
}

Than with jQuery

if ( $(document).height() < $(window).height() ) {
    $('footer').addClass('bottom');
} else {
    $('footer').removeClass('bottom');
}

So if body is shorter than window, it would add class to make it stick with bottom, but if body is higher, then it would be normal.

score 0 · Answer 2 · edited Apr 28 '17 at 12:28

0

I suppose you are using div to make the footer. Have you tried the z-index CSS property? A larger z-index would cause the element to appear in front.

Just a suggestion to try out.

edited Apr 28 '17 at 12:28

halfer

19,824
17
99
186

answered Nov 07 '13 at 09:36

Chong Lip Phang

8,755
5
65
100

score 0 · Accepted Answer · edited Apr 28 '17 at 12:29

This method fixed my problem. I think it should fix all the problem related sticky footer. Thank you for all responding to my question.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
footer.bottom {
    position: fixed;
    bottom: 0px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
if ( $('#x')[0].scrollHeight < $(window).height() ) {
    $('footer').addClass('bottom');
} else {
    $('footer').removeClass('bottom');
}
});
</script>
</head>
<body>
<div id="x">
<table height="1000" bgcolor="#999999">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

    <footer>
    Lorem Ipsum
    </footer>

</div>
</body>
</html>

score -1 · Answer 4 · answered Nov 07 '13 at 09:14

-1

if you use:

position:fixed;
bottom:0px;

That should do it

And width:100%; if you need it.

answered Nov 07 '13 at 09:14

Dr Robotnik

352
1
4
14

But I need the footer which should always stand after the contents. position: fixed footer will be fixed on the page always.. – Hari Krishnan Nov 07 '13 at 09:18
1

please read the question complete :" I tried using position. But when the content became larger than the monitor height then the content overwrite on the footer. " – Hamed mayahian Nov 07 '13 at 09:18

Stick a footer to the bottom of the page

4 Answers4