Calculate height of a dynamically loaded div

Question

I have a requirement where my header height changes.The header takes some time or say delay while loading.And based on the header height,my body's height has to be calculated and should be set accordingly.

Here's the sample code:

<div class="header header.row">
header content
</div>

<div class="main main.row">
body content
</div>

JS Code:

document.ready(function()
{
main.top=header.height;
});

My concern is how can we know when the header div is completely loaded.Is there any way to find that the header is finally loaded and then calculate the body position.Workaround tried is setting up delay of 750ms.But as delay normally won't work in real scenarios,trying to find alternatives.

Any help is surely appreciated.

Thanks in advance.

Answer 1

With jQuery it's something like this:

$(window).load(function() {
    $('.main').css('top', $('.header').height());
});

Answer 2

You can listen for the onload event, either on window or document eg

document.onload = function() {
  var height = document.getElementsByClassName('header')[0].clientHeight;
}

Note, don't need header and header.row ; you should just use header row to give the div both classes.