CSS + JS - Fill height of viewport with section minus the header height

js-fill-height-of-viewport-width-section-minus-header-height.js

$( window ).on( 'resize', debounce( function () {
    var $header = $('.site-header');
    $.each($('.content-section.type-hero'), function (index, node) {
        var $hero = $(node);
        $hero.css('height', 'calc(100vh - ' + $header.height() + 'px)');
    });
} ) );

function debounce( func, wait, immediate ) {
	var timeout;
	return function () {
		var context = this, args = arguments;
		var later = function () {
			timeout = null;
			if ( !immediate ) func.apply( context, args );
		};
		var callNow = immediate && !timeout;
		clearTimeout( timeout );
		timeout = setTimeout( later, wait );
		if ( callNow ) func.apply( context, args );
	};
};