En general, CSS Sticky Footer es la mejor manera de hacerlo, ya que funciona perfectamente y no requiere JavaScript. Si el marcado requerido simplemente no es posible, este JavaScript jQuery podría ser una opción.
HTML
Solo asegúrate de que el #footer sea lo último que se vea en tu página.
Sticky Footer CSS
Darle una altura determinada es lo más infalible.
#footer ( height: 100px; )jQuery
Cuando se carga la ventana y cuando se desplaza o cambia de tamaño, se comprueba si el contenido de las páginas es más corto que la altura de la ventana. Si es así, significa que hay un espacio en blanco debajo del contenido antes del final de la ventana, por lo que el pie de página debe reposicionarse en la parte inferior de la ventana. De lo contrario, el pie de página puede conservar su posición estática normal.
// Window load event used just in case window height is dependant upon images $(window).bind("load", function() ( var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); function positionFooter() ( footerHeight = $footer.height(); footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; if ( ($(document.body).height()+footerHeight) < $(window).height()) ( $footer.css(( position: "absolute" )).animate(( top: footerTop )) ) else ( $footer.css(( position: "static" )) ) ) $(window) .scroll(positionFooter) .resize(positionFooter) ));Manifestación
Ver demostración