Absolute Positioning with Footer not working

Question

I have no idea how to fix this. Putting things on position: relative will null out the bottom: 0px, and will also create tons of white space on pages that don't fit the entire height due to lack of content.

Putting it on absolute makes it cover content of pages that do have content long enough to generate a scroll bar.

.footer {
  width: 100%;
  height: 150px;
  background: #3167b1;
  position: absolute;
  bottom: 0px;
}

This should be working right? For some reason it just doesn't. Is it Wordpress? Never had this problem before and I have already gone through and cleaned up a lot of issues that may have caused it.

EDIT: Silly me... I forgot the html here. Right now it has nothing in it so it is just:

<div class="footer"></div>

I have it like that just to test it. To see what is happening you can visit it here: http://www.yenrac.net/theme

I hope that helps clarify some things.

I have also created this theme from scratch.

Answer 1

If I got your question right, this should work:

http://jsfiddle.net/9qq1dtuf/

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 170px;
}
.footer {
    width: 100%;
    height: 150px;
    background: #3167b1;
    position: absolute;
    bottom: 0px; left: 0;
}