Footer Won't Stick to the Bottom

Question

My footer won't stick to the bottom of the page when there is not enough content, for example, when someone does a search for which there are no results the footer shows in the middle of the screen instead of staying at the bottom of the page.

I've read all the other posts but it seems that the code is different to mine.

This is the footer CSS code:

    .footer {
    padding: 10px 0;
     }

      #footercontainer {
    clear:both; 
    width:100%; 
    position:relative; 
    height:250px;
    bottom:0;

    }
#footer {
    clear:both; 
    padding-top:0px; 
    width:100%; 
    position:absolute; 
    bottom:0;
    left:0;
}

#footer img {
    border:none; 
    text-align:center;
}

#footermiddlecontent {
    width:973px;
     margin-left:auto; 
     margin-right:auto;

     }
#footermiddlecontent p {
    font-size:14px;

    }
#footermiddlecontent a {
    font-size:12px; 
    font-family:arial;

    }
#footerbottom p {
    text-align:center; 
    padding-top:5px; 
    font-size:12px; 
    font-family:arial;

    }
#footerbottom a {
    font-family:arial;

    }

Please try http://stackoverflow.com/questions/7956787/footer-wont-stick-to-the-bottom-help also http://stackoverflow.com/questions/1488565/how-to-stick-a-footer-to-bottom-in-css I'd recommend avoiding use of javascript in most cases. Please post a skeleton of your code for a fuller answer. — kush, Sep 17 '12 at 21:27

score 1 · Answer 1 · answered Sep 23 '12 at 17:07

1

It looks like you need to use the CSS Sticky Footer.

answered Sep 23 '12 at 17:07

desbest

4,746
11
51
84

score 0 · Answer 2 · answered Sep 17 '12 at 21:31

0

have you tried using position:fixed

answered Sep 17 '12 at 21:31

atar

98
8

Position fixed will fixed the footer to the bottom of the screen, not the result I'm looking for. I'm looking for the footer to always be at the bottom of the page, with or without content, not the screen. – user1678673 Sep 17 '12 at 21:40

score 0 · Answer 3 · answered Jan 21 '15 at 14:52

0

You need to set the html, body and any other parent element to 100% height. If you could post the rest of your HTML and CSS that makes up the page, I can try to help you more.

answered Jan 21 '15 at 14:52

Mike

72
1
2
9

Footer Won't Stick to the Bottom

3 Answers3