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 id="header">
Header
</div>

<div id="content">
Lorem ipsum
</div>

    
<footer>footer here</footer>

CSS

html, body {
    height:100%;
}
#header{
    background-color:lightblue;
}
#content {
    min-height:100%;
}
footer {
    width:100%;
    background-color:lightgray;
}