wpRock

JavaScript jQuery 👢 Garder le footer HTML en bas de page

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"));
    });
});
  La newsletter wpRock : Du contenu sur le développement et la création web
Julien .MA Jacob
Développeur WordPress
Julien MA Jacob - Développeur WordPress
🧙‍♂️ Passionné par le web et la programmation avec toujours plein de projets en tête 👨‍💻 | Page à propos
  Discussion autour de l'article
S’abonner
Notification pour
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires