jQuery $(window).height wrong with dynamic added content

Question

I'm using jQuery to dynamically position my footer, Now the problem is the

$(window).height();

is wrong because i include a navigation using:

$('.navigation').load('includes/navigation.html');

After that I check to see but the $(window).height() doesn't include the height of the added item, I add the item before checking the height so that can't be the problem. I also tried $(document).ready() and $(window).load()

Here's the full code

$(window).load(function(){


    $('.navigation').load('includes/navigation.html');

    var docheight = $(document).height();
    var winheight = $(window).height();

    console.log('window: ' + winheight + ', document: ' + docheight);
});

Answer 1

You should use the load() complete callback to get new document's height, otherwise as load() is async, you would get height before new content is added to the DOM:

$('.navigation').load('includes/navigation.html', function(){
    var docheight = $(document).height();
});

Answer 2

This is correct behaviour.

$(window).height() is the height of the browser window and will not be affected by elements added/removed from the DOM.

$(document).height() is the height of the document within the DOM and will be affected by DOM amends.