为什么document.ready不总是工作？

Question

我有这个非常简单的功能，根据页面上的元素调整div的大小。
由于页面顶部的静态导航栏，我需要控制它下面的空白空间，第一个div的内容出现在正确的位置（导航栏下方），特别是因为当屏幕较小时，导航栏变大（高度更大）。
我的问题是：为什么它不总是工作？它在大多数情况下都能正常工作，但有时我需要刷新页面才能正常工作。
这里是虚拟的HTML：

<div id="menu-fixed-top"></div> 
<div id="empty-space"></div> 
<div id="content"></div> 

其中#empty-space是我要控制高度的股利。我使用document.ready和window.resize来控制它。 jQuery函数是：

$(document).ready(function() { 
    var height = $("#menu-fixed-top").innerHeight(); 
    $("#empty-space").height(height); 
    $(window).resize(function() { 
     $("#empty-space").height(height); 
    }); 
}); 

有什么办法得到它的工作时间的100％？或者唯一的方法是确保使用媒体查询？
谢谢

Answer 1

document.ready将在整个DOM加载并准备好执行javascript时触发。这是为了避免任何JavaScript准备好的问题，但整个DOM尚未完成加载。

http://learn.jquery.com/using-jquery-core/document-ready/

我会首先检查的DOM加载完成后没有绘制的document.ready的结论是jQuery是不踢它关闭之前被触发。

您可能也想看看window.load如果你想计算的高度以及诸如DOM =完全呈现的页面