stick footer at the bottom of the page

Question

please see this site in firefox:

http://www.imageworkz.asia/microtel

the footer does not stick at the bottom of the page like how it is with stackoverflow's footer. I tried several techniques as shown in some reference sites but still, no luck.

I need some css experts out there to help me out with this. Thank you!

score 3 · Accepted Answer · edited May 23 '17 at 10:34

There are mare ways to make sticky footers. A basic trick for a footer with fixed height

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
    height: 150px; /* .push must be the same height as .footer */
}

or

you can check this post (and many others) with the title "sticky footer"

score 1 · Answer 2 · answered May 08 '12 at 08:32

1

add position:fixed; bottom:0; left:0 to footer and it will fix it in place. If you then add #container {padding-bottom:120px} (or something around that amount) your content won't be hidden by the footer when viewing the bottom of the page

answered May 08 '12 at 08:32

Smegger

1,008
1
6
15

score 0 · Answer 3 · answered May 08 '12 at 08:32

0

Make it fixed position with bottom 0 value:

footer {
    position: fixed; 
    bottom: 0;
}

answered May 08 '12 at 08:32

antyrat

27,479
9
75
76

score 0 · Answer 4 · answered Sep 20 '13 at 22:39

<script type="text/javascript">  
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
}
});
</script>

stick footer at the bottom of the page

4 Answers4