Anónimo
Sticky Footer: Como mantener el Footer en la parte inferior del navegador
por Juanma Garrido
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 pagina pegajoso) 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…
<body>
<div id="container">
<div id="header"> … </div>
<div id=”content”> … </div>
<div class="push"></div>
</div>
<div id=”footer”> … </div>
</body>
aplicaríamos este CSS …
* { margin: 0; }
html, body { height: 100%; }
/* El margin-bottom de container es el valor negativo de la altura del footer */
#container { min-height: 100%; height: auto !important; height: 100%;
margin: 0 auto -4em; }
/* .push debe tener la misma altura que footer */
#footer, .push { height: 4em; clear:both; }
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
- ¿Te gustó el post? »
- Vótalo (19)
- Añádelo a tus favoritos
Comentarios sobre Sticky Footer: Como mantener el Footer en la parte inferior del navegador
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 :P
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'});
}
}
@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!
Excelente la información que nos muestras en tu blog, ayuda a obtener más conocimientos sobre este tema.