En général, le CSS Sticky Footer est la meilleure solution, car il fonctionne parfaitement et ne nécessite pas de JavaScript. Si le balisage requis n'est tout simplement pas possible, ce JavaScript jQuery peut être une option.
HTML
Assurez-vous simplement que le #footer est la dernière chose visible sur votre page.
Sticky Footer CSS
Lui donner une hauteur fixe est la plus infaillible.
#footer ( height: 100px; )jQuery
Lorsque la fenêtre se charge et lorsqu'elle est défilée ou redimensionnée, on teste si le contenu des pages est plus court que la hauteur de la fenêtre. Si tel est le cas, cela signifie qu'il y a un espace blanc sous le contenu avant la fin de la fenêtre, donc le pied de page doit être repositionné au bas de la fenêtre. Sinon, le pied de page peut conserver son positionnement statique 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) ));Démo
Voir la démo