Почему 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% времени? Или единственный способ - это использовать медиа-запросы?
Thanks

Answer 1

document.ready будет запускаться, когда весь DOM загружен и готов к выполнению javascript. Это делается для того, чтобы избежать проблем с готовностью javascript, но весь DOM не закончил загрузку.

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

Я бы сначала проверить, чтобы увидеть, что DOM закончил загрузку без document.ready быть вызвано, прежде чем сделать вывод, что JQuery не пинать его.

Вы также можете посмотреть на window.load, если Вы желаете, чтобы рассчитать высоту и такие, как DOM = полностью оказанные страницы