Jquery function to vertical align the elements doesn't work

Question

I am using this function to vertically align the information regarding the projects in the following link:

/* First make each project-section div full height */   
$(window).on("load resize scroll", function(e) {
    if ($(window).height() > 600 && $(window).width() > 980 ) {
        screenHeight = $(window).height();
        menuHeight = $('#main-header').outerHeight();
        finalHeight = screenHeight - menuHeight;
        $('.project-section').css('height', finalHeight + 'px');

        /* Then Vertically align the elements */
        var colHeightElement = $('.project-section > .et_pb_row > .et_pb_column');
        colHeightElement.each(function( index ) {
            var colHeight = $(this).outerHeight();
            var colPadding = (finalHeight-colHeight)/2;
            $(this).css('padding-top', colPadding + 'px');
        });

    }


});

As you can see in the link the elements never get the proper height, but I can not find why.

Answer 1

I think that the problem was with the scroll function. The first time that the user scrolls it takes padding-top 0, but when it keeps scrolling it takes .outerheight() with the given padding and recalculates again the value.

The solution is to change this:

var colHeight = $(this).outerHeight();

to this:

var colHeight = $(this).height();