Em geral, o CSS Sticky Footer é a melhor opção, já que funciona perfeitamente e não requer JavaScript. Se a marcação necessária simplesmente não for possível, este jQuery JavaScript pode ser uma opção.
HTML
Apenas certifique-se de que o # rodapé seja a última coisa visível na sua página.
Sticky Footer CSS
Dar-lhe uma altura definida é a mais infalível.
#footer ( height: 100px; )jQuery
Quando a janela é carregada e quando ela é rolada ou redimensionada, é testado se o conteúdo das páginas é mais curto do que a altura da janela. Se for, isso significa que há um espaço em branco abaixo do conteúdo antes do final da janela, portanto, o rodapé deve ser reposicionado na parte inferior da janela. Caso contrário, o rodapé pode manter seu posicionamento estático 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) ));Demo
Ver demonstração