JavaScript jQuery 👢 Keep the HTML footer at the bottom of the page

Share on email
Share on twitter
Share on linkedin
Share on facebook
Article Keep the footer of your html web pages down with JavaScript and jQuery by @wpr0ck
Article Keep the footer of your html web pages down with JavaScript and jQuery by @wpr0ck
Article Keep the footer of your html web pages down with JavaScript and jQuery by @wpr0ck
Article Keep the footer of your html web pages down with JavaScript and jQuery by @wpr0ck
Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email

A JavaScript and jQuery function that keeps the footer (footer) at the bottom of the browser, even when the content of the web page is short.

 

To do this, the code below compares the distance between the footer of the page HTML (in this example, it is the element that has the ID" footer") in relation to the height of the web browser window. If the footer is too high, the function applies a higher margin (margin-bottom) to compensate for this difference. Finally, we call the function twice. Once the page has been loaded for the first time. Then we call him a second time on the event $(window).resize() which is triggered each time the browser is resized.

 

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
WordPress Developer
Julien MA JACOB - WordPress Developer
Passionate about the web and programming with always many projects in mind
  Discussion of the article
Subscribe to the newsletter
Notify to
guest
0 Comments
Inline Feedbacks
View all comments