javascript - 为什么 document.ready 并不总是有效？

Question

我有这个非常简单的函数来根据页面上的元素调整 div 的大小。
由于页面顶部的静态导航栏，我需要控制其下方的空白区域，以便第一个包含内容的 div 出现在正确的位置(导航栏下方)，特别是当屏幕较小时，导航栏变大(高度变大)。
我的问题是:为什么它并不总是有效？大多数时候它工作正常，但有时我需要刷新页面才能工作。
这是虚拟 HTML:

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

其中 #empty-space 是我要控制高度的 div。
我使用 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/

在得出 jquery 未启动它的结论之前，我会首先检查 DOM 是否已完成加载而没有触发 document.ready。

如果你想计算高度，比如 DOM != 完全呈现的页面，你可能还想看看 window.load