Force Footer to bottom JS code no longer works

[wowflak]

Hi

I have been using this code:
// Force Footer to Fixed at bottom if content is less
jQuery(document).ready(function($) {
var $main = $(’[role=“main”]’),
$windowHeight = $(window).outerHeight(),
$masthead = $(’.masthead’).outerHeight(),
$wpbar = $(’#wpadminbar’).outerHeight(),
$footer = $(’.x-colophon.bottom’).outerHeight() + $(’.x-colophon.top’).outerHeight();

$main.css(‘min-height’, $windowHeight - $masthead - $wpbar - $footer - 200);
});

to force the footer down the page when the page is short. However, it has stopped since the V4 update. Looks like you no longer have a min-height specified in the role=“main”. How can I get this working again?

Thanks

[christian]

Hey @wowflak,

I’m not sure why that code works in the past when it’s not coded correctly.

Here’s the correct code.

// Force Footer to Fixed at bottom if content is less
jQuery(document).ready(function($) {
var $main = $('.x-main'),
$masthead = $('.masthead').outerHeight(),
$wpbar = $('#wpadminbar').outerHeight(),
$footer = $('.x-colophon').outerHeight(),
$totalHeight = $masthead + $wpbar + $footer

$main.css('min-height', 'calc(100vh - ' + $totalHeight + 'px)' );
});

If there’s nothing conflicting with that code, it would surely work like in this video https://youtu.be/VOVUG9kHFBk

Please just note that we do not support any custom codes even if we’re the one who provided them. ALL custom codes serve only as a guide to help you get started extending our products. If you’ll encounter further issues with the code, please consult with a 3rd party developer.

I’ll add this as a feature request to so our development team might consider this feature or option in a future release.

Hope that helps.