JQuery Sticky Footer - CSS-Tricks | Code Ausschnitte 2025

Im Allgemeinen ist die CSS Sticky Footer der beste Weg, da sie perfekt funktioniert und kein JavaScript erfordert. Wenn das erforderliche Markup einfach nicht möglich ist, ist dieses jQuery-JavaScript möglicherweise eine Option.

HTML

Stellen Sie einfach sicher, dass die Fußzeile das letzte sichtbare Element auf Ihrer Seite ist.

 Sticky Footer

CSS

Es ist am narrensichersten, ihm eine festgelegte Höhe zu geben.

#footer ( height: 100px; )

jQuery

Beim Laden des Fensters und beim Scrollen oder Ändern der Größe wird geprüft, ob der Seiteninhalt kürzer als die Fensterhöhe ist. Wenn dies der Fall ist, befindet sich unter dem Inhalt vor dem Ende des Fensters ein Leerraum. Daher sollte die Fußzeile am unteren Rand des Fensters neu positioniert werden. Wenn nicht, kann die Fußzeile ihre normale statische Position beibehalten.

// 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) ));