jquery code doesn't set the height from the very start?

Question

I'm using this simple snippet at the end of my code in order to make an element fill the remaining height available on the screen:

$(document).ready(function(){
        vpw = $(window).width();
        vph = $(window).height();
        $('#author').css({'height': (vph - $('.navigation').height() - $('.menu').height()) + 'px'});
    });

However the height isn't modified from the very start. After I refresh the page, it will have the default height and the height will get modified like a second later, after all the child elements have loaded.