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/

我首先检查DOM是否已经完成加载而没有document.ready被触发，然后得出jquery没有将其踢掉的结论。

如果您想要计算高度，可能还需要查看window.load，例如DOM！=完全呈现的页面

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

1 个答案: