Garder le footer HTML en bas de page avec JavaScript jQuery

Twitter
LinkedIn
Facebook
Mail

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 porte l’ID « footer ») par rapport au à 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"));
    });
});

 

Julien MA Jacob
Développeur WordPress
Julien MA Jacob
Passionné par le web et la programmation avec toujours plein de projets en tête