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;
}

Answer 2

Just add this to your css:

body {
    margin: 0;
    padding: 0;
    background: #efefef;
    font-family: 'Lato', serif;
    padding-bottom: 174px; //add this line - height of footer + margin from content
}

I added 24px margin from content as an example. It would be best if you added this to your css:

* {
  box-sizing: border-box;
}

or just for the body

body {
  box-sizing: border-box;
}

So as your added padding does not add to your height and you get unnecessary scroll-bars.

Answer 3

Well, I doubt it's Wordpress ...unless you are using a pre-made theme (or something along those lines). It's pretty hard to see what you've done without seeing the HTML. But anyways, heres what I think might have been the problem:

You have selected the footer element that has a class of "footer". I'm going to go ahead and make an educated guess that you meant to select the footer element by its name (NOT it's class). So maybe it's just a small little tiny bitty fix (i.e. remove the "." before footer in your CSS):

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

Answer 4

Please try bellow css

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

<div class='footer'>
</div>