title: jQuery miscalculates div height on document ready
body: <p>I'm trying to change the section height after the page loads but it doesn't always work. I know my code to change the height is fine, and it works on window resize, just the initial call after document.ready doesn't always work. </p>
  
  <pre><code>var $window = $(window);
  
  function wrap_element_link_mobile(object, path) {
      if ($(this).width() &lt; 921 &amp;&amp; !object.parent().is('a')) {
          object.wrap("&lt;a href='" + path + "'&gt;&lt;/a&gt;");
      } else if ($(this).width() &gt; 920 &amp;&amp; object.parent().is('a')) {
          object.unwrap();
      }
  }
  
  function resize_section() {
      var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7;
      $('section').css('min-height', sectionMinHeight);
  }
  
  /* Called after document Load
  ================================ */
  
  $(document).ready(function () {
      var $mainLogo = $('#main-logo');
  
      wrap_element_link_mobile($mainLogo, '/');
      resize_section();
  
      $window.resize(function () {
          wrap_element_link_mobile($mainLogo, '/');
          resize_section();
      });
  });
  </code></pre>
  
  <p>After creating a console.log in the initial call I figured out it is getting called but for some reason it's not working.</p>
  
  <p>*Edit screen of what I see</p>
  
  <p><img src="https://i.stack.imgur.com/YcM9r.jpg" alt="Error"></p>
  
  <p>Notice the scroll bar, it goes away if I resize the window at all though and is the proper height.</p>
  
  <p><a href="http://jsfiddle.net/QHSm3/6/" rel="nofollow noreferrer">http://jsfiddle.net/QHSm3/6/</a></p>