CODEWITHSUNDEEP
htmlcsswordpresspositionfooter
user3634781
user3634781

Reputation: 79

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 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.

Upvotes: 5

Views: 15036

Answers (4)

Roumelis George
Roumelis George

Reputation: 6746

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.

Upvotes: -1

James
James

Reputation: 979

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

Upvotes: 0

Mitul
Mitul

Reputation: 3427

Please try bellow css

.footer {
  position: fixed;
  bottom: 0;
  height: 150px;
  background: #3167b1;
  width: 100%;
  left: 0;
}
<div class='footer'>
</div>

Upvotes: 0

sdvnksv
sdvnksv

Reputation: 9668

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

Upvotes: 10

Related Questions