Mantener el footer siempre en el pie

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

La idea del post es muy sencilla, conseguir mantener el footer (pie de página) de nuestro site siempre en la parte inferior. Puede parecer que sería lo normal refiriendose al pie de la página pero muchas veces la página al no tener mucho contenido o no dar la altura suficiente el footer queda a mitad de la página.

Partiendo de la siguiente estrucutra, añadiendo este hack conseguiremos mantener el footer siempre en el pie.

<div id="wrapper">
<div id="header"></div>
<div id="content">/div>
<div id="footer">Contenido del footer</div>
</div>

<!-- wrapper --></div>

El primer y último paso es añadir lo siguiente en nuestra hoja de estilos (CSS)

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
}
#content {
    padding-bottom:100px; /* Altura del footer */
}
#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Desde guiabreve puedes acceder a este hack que te enseña cómo mantener el Footer siempre abajo.

Un comentario

  1. Aridio dijo:
    27 noviembre, 2012
    Responder

    Excelente! era lo que necesitaba, todas las técnicas que había encontrado eran una porquería, este si que funciona! gracias 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.