计算动态加载的div的高度

Question

我有一个要求，我的标题高度会发生变化。标题在加载时会花费一些时间或说要延迟。根据标题高度，必须计算我的身体高度，并应进行相应设置。

这是示例代码：

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

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

JS代码：

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

我关心的是如何知道标头div何时完全加载。是否有任何方法可以找到标头最终加载然后计算主体位置。尝试的解决方法是将延迟设置为750ms，但是通常不会设置延迟在实际场景中工作，试图寻找替代方案。

任何帮助都将不胜感激。

提前致谢。

Answer 1

使用jQuery就是这样的：

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

Answer 2

您可以在window或document上监听onload事件，例如

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

注意，不需要header和header.row ； 您应该只使用header row来给div两个类。