Placing Footer at Bottom of Screen

Question

Possible Duplicate:
CSS sticky footer

I had this problem for quite a while now and the problem is with all my footers. Everytime I place in this code syntax:

  <Footer>
    <p class="About">DESIGN BY MICHAEL & CODE BY ROKO</p>
  </Footer>

Footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 141px;
background: url(../assets/content/footer.png) repeat-x left bottom;
}

The footer is either placed at the bottom but when you scroll, it stay where it is and there footer is pretty much half way up the page, or the text that's supposed to be within' the footer is at the top of the page.

Could anyone please help me? I tried to look up Sticky Footer and the result was still the same...

A "sticky footer" is the answer. If it's not working, you're not implementing it correctly. — thirtydot, Sep 25 '11 at 01:34
You only posted half the story... where is the HTML that goes with that CSS? — Sparky, Sep 25 '11 at 02:04
That's the Footer. And I found out why there was a vertical scroll when everything was in place and it was a different object, same with the horizontal. And now the Footer still stays in it's place.... — Michael, Sep 25 '11 at 18:48

itsmatt · Answer 1 · 2011-09-24T23:57:01.233

21

I do something like this and it works pretty well:

<div class="footer" id="footer">My Footer</div>

#footer
{
    clear: both;
    border: 1px groove #aaaaaa;
    background: blue;
    color: White;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

You can see an example here: http://jsfiddle.net/RDuWn/

edited Sep 24 '11 at 23:57

answered Sep 24 '11 at 23:49

itsmatt

31,265
10
100
164

I like this solution better, it is nice and clean – Sep 25 '11 at 07:04
1

I find a problem (I'm using Chrome or IE): the last words of the Lorem ipsum are hidden by the footer. – ChrisW Jun 22 '13 at 00:27

score 2 · Answer 2 · answered Sep 25 '11 at 01:51

2

I found this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page a while ago and use a similar method

answered Sep 25 '11 at 01:51

Connor

1,024
4
16
24

score 0 · Answer 3 · edited May 23 '17 at 12:23

Check out the below link -

How do you get the footer to stay at the bottom of a Web page?

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Placing Footer at Bottom of Screen

3 Answers3