JQuery Sticky Footer - CSS-triks

Generelt er CSS Sticky Footer den beste måten å gå, da den fungerer perfekt og ikke krever JavaScript. Hvis den påkrevde koden ganske enkelt ikke er mulig, kan dette jQuery JavaScript være et alternativ.

HTML

Bare vær sikker på at #footer er den siste synlige tingen på siden din.

 Sticky Footer

CSS

Å gi den en bestemt høyde er det mest idiotsikre.

#footer ( height: 100px; )

jQuery

Når vinduet lastes, og når det rulles eller endres, testes det om sidens innhold er kortere enn vinduets høyde. Hvis det er, betyr det at det er hvite mellomrom under innholdet før slutten av vinduet, så bunnteksten skal plasseres på nytt i bunnen av vinduet. Hvis ikke, kan bunnteksten beholde normal statisk posisjonering.

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