El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Sticky Footer: Una solución sencilla para tus pies de página

Seguro que alguna vez te has visto en problemas para mantener el pie de tus páginas en su sitio, abajo del todo. Ya vimos, en este mismo blog, una aproximación que nos permitía conseguir que los pies de página se mantuviesen en su sitio. No obstante, aquella solución nos obligaba a emplear atributos de estilo propietarios y no válidos.

Ryan Fait llega a otra solución que, en lugar de requerir etiquetas no válidas, requiere un div extra y poco más.

El CSS es algo tan simple como:


* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em; /* el margen inferior es el valor del pie en negativo */
}
.footer, .push {
	height: 4em; /* .push y .footer deben tener la misma altura*/
}

Pero lo mejor es que veáis el ejemplo y echéis un vistazo al código.

(x)HTML, CSS

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

3 Respuestas a “Sticky Footer: Una solución sencilla para tus pies de página”

Agrega tu comentario

  1. Bono dice:

    Gracias!!
    justo andaba necesitando esto! funcionó perfecto. :)

  2. Felipe de Jesús dice:

    Saludos, quisiera saber si alguien me podría ayudar.

    Supongamos que entre el header y el footer de mi diseño tengo otro div denominado content.

    Como podría lograr que este componente adaptara su height de manera que cresca y se adapte al alto de la pantalla.

    Me urge su ayuda, gracias por adelantado a quien me pueda sacar de este apuro.

Trackbacks/Pingbacks

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene más de año y medio. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández