en CSS, HTML

Sticky Footer: Como mantener el Footer en la parte inferior del navegador

En la maquetación de nuestros sitios web nos encontramos muchas veces con que tenemos que solucionar un pequeño problema: necesitamos mantener el footer pegado al pie de la pagina sea como sea el contenido de esta.

Este tipo de problema con el Footer tambien lo puedes encontrar por la red con el nombre de  “Sticky Footer “ (Pie de paginavpegajoso) y aunque hay varias soluciones por la red,  yo voy a compartir aquí una que me funciona muy bien. Y si algo te funciona, ¿para que cambiar? ¿No?

Asi que, resumiendo… ¿cómo se va a comportar nuestro Footer cuando apliquemos esta tecnica?

  • Que hay mucho contenido… pues la pagina hará su Scroll (como mandan los canones) y debajo de todo tendremos a nuestro Footer
  • Que hay poco contenido… pues veremos toda nuestra pagina sin Scroll y ahí debajo bien situado, pegadito al borde de abajo, veremos a nuestro Footer saludando 🙂

Esta técnica nos viene de la mano de Ryan Fait  y lo unico que hay que hacer es añadir un DIV de mas.

Es decir para una estructura HTML como esta…

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

aplicaríamos este CSS …

* {
  margin: 0; 
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

Puedes ver un ejemplo de esta tecnica de la mano del propio autor.

¿Y tu? ¿Conoces alguna otra técnica “definitiva” para solucionar este problema?

Esperamos vuestros comentarios

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)

  1. Yo cambio la propiedad «position» (entre realtive y fixed) usando jQuery… Es la forma mas comoda que encontré.. ya que muchas veces el height del footer no se puede tocar 😛
    Asi:

    $(document).ready(heightTest);
    $(window).load(heightTest);
    $(window).resize(heightTest);
    
    function heightTest() {
    	var windowHeight = $(window).height();
    	var documentHeight = $(document).height();
    	
    	if (documentHeight > windowHeight) {
    		$('#footer').css({'position' : 'relative', 'top' : '30'});
    	} else {
    		$('#footer').css({'position' : 'fixed', 'bottom' : '0'});
    	}
    }

  2. @neiker, desde luego, si no puedes poner por CSS la altura del footer, una solución como la que comentas por JS & jQuery seria la adecuada.

    Pero ya dependes de tener cargada la libreria jQuery y de que esté el JS activado. Aunque… hoy en dia, en la mayoria de los desarrollos webs vas a necesitar ambas cosas, asi que esto ya va dejando de ser un problema 🙂

    Gracias por la aportacion!