Colocar el pie de página en la parte inferior de la pantalla [duplicado] - html, css, footer, sticky-footer

Posible duplicado:
CSS pie de página adhesivo

Tuve este problema desde hace bastante tiempo y el problema está en todos mis pies de página. Cada vez que coloco en esta sintaxis 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;
}

El pie de página se coloca en la parte inferior, perocuando se desplaza, permanece donde está y el pie de página se encuentra casi a la mitad de la página, o el texto que se supone debe estar dentro del pie de página se encuentra en la parte superior de la página.

¿Podría alguien ayudarme por favor? Intenté buscar Sticky Footer y el resultado fue el mismo ...

Respuestas

Hago algo como esto y funciona bastante bien:

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

Puedes ver un ejemplo aquí: http://jsfiddle.net/RDuWn/

Encontré esto: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Hace un tiempo y utiliza un método similar

Echa un vistazo al siguiente enlace:

¿Cómo conseguir que el pie de página se quede en la parte inferior de una página 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/

*/