为什么document.ready不能一直工作？

Question

I have this very simple function to resize a div according to an element on the page.
Because of the static navigation bar on top of the page, I need to control the empty space underneath it, for the first div with content to appear on the right place (below the navigation bar), specially because when the screen is smaller, the navigation bar gets larger (height is bigger).
My question is: why does it not always work? It works fine most of the times, but sometimes I need to refresh the page for it to work.
Here is the dummy HTML:

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

where the #empty-space is the div I want to control the height.
I used the document.ready and the window.resize to control it. The JQuery function is:

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

Is there any way to get it working 100% of the time? Or the only way is to be sure is to use media queries?
Thanks

Answer 1

document.ready will trigger when the whole DOM has loaded and is ready for javascript to execute. This is to avoid any problems with javascript being ready to go but the whole DOM hasn't finished loading.

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

I would first check to see that the DOM has finished loading without document.ready being triggered before drawing the conclusion that jquery isn't kicking it off.

You may also want to look at window.load if you're wanting to calculate heights and such as the DOM != the fully rendered page