Footer won't stick to the bottom of the page

I'm creating a new responsive mobile version of my portfolio from one of the tutorials and I don't have much content on my any of my pages. My footer keeps showing up in the view port. I've tried positioning the footer to absolute. This allows the footer to be at the bottom of the page but then there's a bunch of white space between section and footer on some of my pages.

Here's what my footer code looks like:

footer{ font-size: 0.90em; text-align: center; clear:both; bottom: 0; height: 20px; }

even added:

header{ margin: 0; padding:0; height: 100%; }

I started my wrapper div just before <section> </section> in my code so that the header extends across the top of the page but the content would be in the middle of the page. I just can't seem to get the footer to stick to the bottom. I've tried placing the footer outside of the wrapper div. I've also checked out http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page blog but not understanding it since i'm using html 5 elements to replace divs ex: header, nav, section, footer....

Can any please help? Sorry if this sounds confusing by the way.