Webmaster Libre

Desarrollo web con software libre

Buscador

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.

Otras entradas

Esta entrada fue publicada por Alma Fernández el Lunes, 30 de Abril de 2007 y está archivada en: (x)HTML, CSS. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

3 Comentarios

Agrega el tuyo
  1. Gracias!!
    justo andaba necesitando esto! funcionó perfecto. :)

    Bono 1 Mayo, 2007

  2. 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.

    Felipe de Jesús 28 Mayo, 2007

  3. [...] http://www.webmasterlibre.com/2007/04/30/sticky-footer-una-solucion-sencilla-para-tus-pies-de-pagina... [...]

    Blog eXencial » Posicionando el pie de página siempre abajo 24 Marzo, 2008

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory