This script makes sure the footer always remain to the bottom of the page. It is best in situations where page's content is less and footer doesn't stick to the bottom of the page. It works by adding a min-height property to the main content of the p

fixFooterToBottom.js

/**
 * 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 );
    }
});