Keep Footer Down

If content is too short, the footer is displayed at bottom of the screen. If the content is long enough, the footer displays like normal.

HTML

<div class="wrapper">
    <div>content here, this will push the footer down the page if it is needed</div>
    <footer>footer here</footer>
</div>

CSS

html, body {
    height:100%;
    min-height:100%;
}
.wrapper {
    position:relative;
    min-height:100%;
}
footer {
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:red;
}