Colocar Rodapé na Parte Inferior da Tela [duplicado] - html, css, footer, sticky-footer

Duplicar Possível:
Rodapé de CSS

Eu tive esse problema por um bom tempo agora e o problema é com todos os meus rodapés. Toda vez que eu coloco nesta sintaxe de código:

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

O rodapé é colocado no fundo, masquando você rola, fica onde está e o rodapé está praticamente na metade da página, ou o texto que deveria estar dentro do rodapé está no topo da página.

Alguém poderia me ajudar? Tentei procurar o Sticky Footer e o resultado ainda era o mesmo ...

Respostas:

Eu faço algo assim e funciona muito bem:

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

Você pode ver um exemplo aqui: http://jsfiddle.net/RDuWn/

Eu achei isto: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page um tempo atrás e use um método semelhante

Confira o link abaixo -

Como você coloca o rodapé no final de uma página da Web?

* {
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/

*/