CSS Question

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

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?

enter image description here

Answer

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!