I had the same problem a few weeks ago with the website I am working on and after a little bit of searching and trial and error work I managed to find the resolution to this problem.
I have here the code as it is a little bit hard to explain:
HTML:
<header>
some header<br />
</header>
<section>
<!-- no content -->
<!-- little content -->
<div id="little-content">some content</div>
<!-- a lot of content -->
<div id="lotsa-content">some more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more content</div>
</section>
<footer>
© some footer
</footer>
CSS:
html,
body {
margin: 0;
min-height: 100%;
position: absolute;
width: 100%;
}
header,
footer {
background: red;
color: white;
position: absolute;
text-align: center;
width: 100%;
}
section {
margin: 1.3em 0;
}
#little-content {
display: none;
}
#lotsa-content {
display: none;
}
footer {
bottom: 0;
}
Here is a JSFiddle I made for you.
I hope this helps.
EDIT1:
To be more specific in answering your question: you have to make position the parent of the footer (that I guess it's the body) absolute and give it a min-height of 100% (also for its width), the same positioning for the footer (position: absolute;) and also to stick it to the bottom with bottom: 0; and the last thing is to give a bottom margin of the footers height so that it doesn't overlap (I also gave a top margin due the fact that I made the header absolute as well).
EDIT2:
Here is the JSFiddle example with the code you provided.