En este art\u00edculo vamos a ver como posicionar el pie de p\u00e1gina siempre en la parte de abajo de la pantalla teniendo en cuenta que las p\u00e1ginas var\u00edan de longitud seg\u00fan su contenido.<\/p>\n
En el ejemplo que vamos a ilustrar tenemos una estructura Web de: cabecera, contenido y pie de p\u00e1gina. Lo que queremos hacer es posicionar el pie de p\u00e1gina siempre en el bottom de la pantalla. Depender\u00e1 de las dimensiones de la pantalla.<\/p>\n
En este caso, si el contenido de una p\u00e1gina no cubre el total de la pantalla se realiza un c\u00e1lculo 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\u00e1gina cubre la longitud total de la pantalla para ver el footer se tendr\u00e1 que hacer scroll pero seguir\u00e1 estando al final de la pantalla.<\/p>\n
Vamos a ver el c\u00f3digo jQuery que va a controlar la altura de la ventana y la altura del contenido de la p\u00e1gina.<\/p>\n
<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0var window_height = $(window).height();\r\n\u00a0\u00a0 \u00a0var page_height = $('#header').height() + $('#content').height();\r\n\u00a0\u00a0 \u00a0var footer_height = $('#footer').height();\r\n\r\n\u00a0\u00a0 \u00a0if (page_height < window_height) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0margin_footer = window_height - page_height - footer_height - 40;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#footer').css('margin-top', margin_footer);\r\n\u00a0\u00a0 \u00a0}\r\n});\r\n<\/script><\/pre>\nEn esta porci\u00f3n de c\u00f3digo 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\u00e1gina. Con estos datos, solo en el caso de que la altura de la p\u00e1gina sea menor a la altura de la pantalla, vamos a hacer un c\u00e1lculo que nos va a modificar el margen por encima del pie de p\u00e1gina con el fin de posicionarlo en el bottom de la p\u00e1gina.<\/p>\n
Si se cumple la condici\u00f3n, tan solo estamos rest\u00e1ndole a la altura de la pantalla, la altura de la p\u00e1gina (cabecera y contenido), la altura del pie de p\u00e1gina y los m\u00e1rgenes entre contenedores, que en el caso del ejemplo hay 40px.<\/p>\n