Une fonction en JavaScript et jQuery qui permet de garder le footer (pied de page) en bas du navigateur, même quand le contenu de la page web est court.
Pour se faire, le code ci-dessous compare la distance qui sépare le pied de la page HTML (dans cet exemple, c'est l'élément qui porte l'ID "footer") par rapport à la hauteur de la fenêtre du navigateur web. Si le pied de page et trop haut, la fonction lui applique une marge supérieure (margin-bottom
) pour compenser cette différence. Enfin, nous appelons la fonction à deux reprises. Une première fois au chargement de la page. Puis nous l'appelons une seconde fois sur l'événement $(window).resize();
qui se déclenche à chaque fois que le navigateur est redimensionné.
jQuery(document).ready(function($) {
/**
* Set footer always on the bottom of the page
*/
function footerAlwayInBottom(footerSelector) {
var docHeight = $(window).height();
var footerTop = footerSelector.position().top + footerSelector.height();
if (footerTop < docHeight) {
footerSelector.css("margin-top", (docHeight - footerTop) + "px");
}
}
// Apply when page is loading
footerAlwayInBottom($("#footer"));
// Apply when page is resizing
$(window).resize(function() {
footerAlwayInBottom($("#footer"));
});
});