Avisar de contenido inadecuado

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

{
}
{
}

Comentarios 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 neiker 01/09/2010 a las 01:11
@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.
Muchas gracias antes lo hacía con javascript
Vladimir Vladimir 12/01/2013 a las 05:23
Este código es conciso!
Muchas gracias por compartirlo, como es compatible con todos los exploradores lo uso de planilla :D
Raven Raven 22/04/2013 a las 20:54
Yo tengo una solucion parecida, sin necesidad de meter la cabecera dentro del contenido.
A ver que os parece.
http://jsfiddle.net/7tHTR/
PD: Acepto comentarios, y criticas constructivas, si lo que hago es inadecuado, me interesa estar informado de ello.
Gracias.

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

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre