JQuery Sticky Footer - CSS-tricks

Generelt er CSS Sticky Footer den bedste vej at gå, da den fungerer perfekt glat og ikke kræver JavaScript. Hvis den krævede markering simpelthen ikke er mulig, kan dette jQuery JavaScript være en mulighed.

HTML

Bare sørg for at #footer er den sidste synlige ting på din side.

 Sticky Footer

CSS

At give det en indstillet højde er det mest narre-bevis.

#footer ( height: 100px; )

jQuery

Når vinduet indlæses, og når det rulles eller ændres, testes det, om sidens indhold er kortere end vinduets højde. Hvis det er tilfældet, betyder det, at der er hvidt mellemrum under indholdet før slutningen af vinduet, så sidefoden skal placeres igen i bunden af vinduet. Hvis ikke, kan sidefoden bevare sin normale statiske placering.

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