javascript 将页脚固定到页面底部

Posted 2021-05-03

/**
 * Fix Footer to the Bottom of The Page
 * 
 * This script makes sure the footer always remain to the bottom
 * of the page. It works by adding a min-height property to the
 * content of the page. 
 * 
 * Variables:
 * 
 * $main   = main content area on which the height will be applied
 * $header = header of the site. Used to set offset.
 * $footer = footer of the site. Used to set offset. 
 * 
 * Author Zeshan Ahmed
 * Author URL: https://zeshanahmed.com/
 * Github Gist: https://gist.github.com/zeshanshani/5acf31f7ff64feebdfd3d46fbd0a2a84
 */
jQuery(document).ready(function($) {
    var $main       = $('.main'),
        $header     = $('.header'),
        $footer     = $('.footer'),
        $win        = $(window),
        $wpadminbar = $('#wpadminbar'),
        height;

    // Initialize the function. 
    // You can also run this on .resize() or any other event.
    increaseFooterHeight();
        
    /**
     * Increase Footer Height
     */
    function increaseFooterHeight() {
        var headerH     = $header.outerHeight(),
            footerH     = $footer.outerHeight(),
            winH        = $win.outerHeight(),
            wpadminbarH = $wpadminbar.outerHeight();

        // Calculate height. Remove as needed. Or set custom value.
        height = winH - headerH - wpadminbarH - footerH;
            
        // Apply the height to the $main.
        $main.css( 'min-height', height );
    }
});