爲什麼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 =完全呈現的頁面