Placing Footer at Bottom of Screen [duplicate]

This question already has answers here: Closed 11 years ago.

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开发者_Go百科 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...

---

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/

---

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

---

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/

*/