Bottom Footer con jQuery

En este artículo vamos a ver como posicionar el pie de página siempre en la parte de abajo de la pantalla teniendo en cuenta que las páginas varían de longitud según su contenido.

En el ejemplo que vamos a ilustrar tenemos una estructura Web de: cabecera, contenido y pie de página. Lo que queremos hacer es posicionar el pie de página siempre en el bottom de la pantalla. Dependerá de las dimensiones de la pantalla.

En este caso, si el contenido de una página no cubre el total de la pantalla se realiza un cálculo observando la longitud de la cabecera y del contenido para posicionar el footer visible al final de la ventana sin generar scroll. En caso contrario, es decir, si el contenido de la página cubre la longitud total de la pantalla para ver el footer se tendrá que hacer scroll pero seguirá estando al final de la pantalla.

Vamos a ver el código jQuery que va a controlar la altura de la ventana y la altura del contenido de la página.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var window_height = $(window).height();
    var page_height = $('#header').height() + $('#content').height();
    var footer_height = $('#footer').height();

    if (page_height < window_height) {
        margin_footer = window_height - page_height - footer_height - 40;
        $('#footer').css('margin-top', margin_footer);
    }
});
</script>

En esta porción de código lo primero que hacemos es capturar la altura de la pantalla, la altura de la cabecera y contenido y la altura del pie de página. Con estos datos, solo en el caso de que la altura de la página sea menor a la altura de la pantalla, vamos a hacer un cálculo que nos va a modificar el margen por encima del pie de página con el fin de posicionarlo en el bottom de la página.

Si se cumple la condición, tan solo estamos restándole a la altura de la pantalla, la altura de la página (cabecera y contenido), la altura del pie de página y los márgenes entre contenedores, que en el caso del ejemplo hay 40px.

Ver ejemplo en funcionamiento