Footer of webpage doesn't reach bottom of page on shorter pages

Question

I have a few webpages on my website that are somewhat short, like the one pictured below. On pages like this, the footer doesn't reach the bottom of the screen. How can I make sure that the footer is at the bottom of the page on all pages of my website, for all screen sizes?

Possible duplicate of [How to push a footer to the bottom of page when content is short or missing?](http://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing) — jonrsharpe, Nov 27 '16 at 17:01

score 1 · Accepted Answer · answered Nov 27 '16 at 17:04

1

You need a sticky footer, check the example:

html, body { height: 100%; }

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}

body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="push"></div>
</div>
<div id="bottom">
    <div id="footer">
        Footer
    </div>
</div>

Or there is another example: http://ryanfait.com/html5-sticky-footer/

Hope it helps!

answered Nov 27 '16 at 17:04

Andrew Savetchuk

1,552
1
16
21

On a short page a sticky footer will cover up content, though, so also needs the min height, I reckon – Nathaniel Flick Nov 27 '16 at 17:51
The defining feature of a sticky footer is the fact that the `min-height` of the container of the entire webpage is 100%, and then the negative bottom margin makes space for the footer, no matter how long the webpage is. Ingenious! – Philadelphia Regional Weather Nov 27 '16 at 18:49

score 0 · Answer 2 · answered Nov 27 '16 at 17:02

0

I usually add a min-height to the content area so it's always at least that height, and therefore will put the footer at the bottom more often than not. I reckon at least 500-800px min height should do it.

answered Nov 27 '16 at 17:02

Nathaniel Flick

2,902
2
22
31

Not exactly true. The question is the footer should reach the bottom of the screen, not always show. – Nathaniel Flick Nov 27 '16 at 17:50

score 0 · Answer 3 · answered Apr 07 '22 at 00:56

    <!-- This code will automatically push the footer to the bottom of the page if there is not enough content to fill the entire page. -->
<script>
jQuery(function($) {
    $(document).ready(function() {
        if ($('body').height() < $(window).height()) {
            $('footer').css({
                'position': 'fixed',
                'bottom': '0px',
                'left': '0',
                'right': '0'
            });
        }
    });
});
</script>

Footer of webpage doesn't reach bottom of page on shorter pages

3 Answers3