Absolute Positioning With Footer Not Working

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 heig

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

Solution 2:

Please try bellow css

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

<divclass='footer'></div>

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

Solution 4:

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 + marginfromcontent
}

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.