Hacer un pie fijo en la parte inferior de la pantalla

       Un caso bastante habitual es que queramos que el pie de página quede fijo en la parte de abajo de la pantalla, como una barra de estado, independientemente del scroll y contenido de la misma. Esto no es muy difícil de conseguir usando CSS:

#footer{
position: fixed;
bottom: 0;
width: 100%;
height: 32px;
padding-bottom: 16px;
background: #111;
background: rgba(0,0,0,.90);
border-top: 2px solid #f00;
z-index:2000;
}

       Las líneas importantes son las dos primeras, hacemos que sea fixed, es decir que se quede fijo y no se desplace con el scroll y que se quede abajo con el bottom a 0. Es importante darle unas ciertas dimensiones, en este caso todo el ancho y un alto fijo. El color de fondo un poco translúcido, aunque damos otro color primero para navegadores que no soportan transparencia, un borde y un z-index alto, por si otro elemento “fixed” interfiriese, que el pie quede por encima.

       Lo que puede pasar es que en pantallas pequeñas estemos usando demasiado espacio con este pie fijo y entorpezcamos la navegación, por ello deberíamos hacer que en pantallas pequeñas no fuera un pie fijo. Para esto tenemos que usar javascript. Por ejemplo (con código jQuery):

function comprobarAncho(){
var altoContenido=window.innerHeight-50;
if (!altoContenido<600){
$('#footer').css("position","relative");
}else{
$('#footer').css("position","fixed");
}
}

       Algo así sería suficiente para comprobar que quede un espacio limpio para el contenido de 600px. Habría que llamar a esta función al cargar la página y en el evento de redimensionado:

comprobarAncho();
$(window).resize(function() {
comprobarAncho();
});

       Al hacerlo relative depende del contenido y quedará detrás de éste, por lo que si el contenido de la página es pequeño (pongamos 300px) el pie quedará en mitad de la pantalla. Podemos cambiar la condición midiendo la altura del contenido y poniendo el pie relative solo si el contenido sobrepasa esos 600px.

       También se podría usar absolute en lugar de relative, pero no funciona bien, el pie aparece inicialmente en la parte inferior de la pantalla, y al hacer scroll sube, quedando en mitad del contenido. Usando absolute se puede dar una posición top al elemento dependiendo de la altura del contenido, incluso en algunas páginas funciona bastante bien con un valor auto en top.

       Para ver un ejemplo de cómo queda un pie de este tipo, fijo en la parte inferior si el contenido entra en pantalla y debajo del contenido sino, podéis visitar la página que hemos hecho para Omarpi, pintores en Valladolid.