title: Making an element fill the entire height of browser viewport using jQuery
body: <p><strong><a href="http://jsfiddle.net/F5dxk/" rel="nofollow">Code</a></strong><br>
  <strong><a href="http://fiddle.jshell.net/F5dxk/show/light/" rel="nofollow">Demo</a></strong></p>
  
  <p>The basic form of HTML looks like this:</p>
  
  <pre><code>&lt;div class="home"&gt;
      &lt;div id="primary" class="content-area"&gt;
          &lt;main id="main" class="site-main" role="main"&gt;
  
              &lt;!-- blah, blah, blah! --&gt;
  
          &lt;/main&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>W.r.t the HTML, I am trying to make the element <code>#main</code> fill the entire height of the browser viewport using JavaScript/jQuery like so:</p>
  
  <pre><code>jQuery(document).ready(function($){
  
      // get height of browser viewport
      var window_h = $(window).height();
  
      // get height of the jumbotron, i.e. element #main
      var jumbotron_h = $('.home #main').outerHeight(true);
  
      // calculate necessary padding (top/bottom) to apply on #main so that the
      // element's height is equal to that of the browser's viewport,
      // and its contents are centered vertically
      if (window_h &gt; (jumbotron_h + 60)) {
          var jumbotron_padding = (window_h - jumbotron_h)/2
      } else {
          var jumbotron_padding = 30
      }
  
      // apply calculated padding on the element dynamically
      $('.home #main').attr('style', 'padding-top:'+jumbotron_padding+'px;padding-bottom:'+jumbotron_padding+'px;');
  
  });
  </code></pre>
  
  <p>As clearly explained in the comments in the code above, the code automatically calculates the necessary padding to be applied on <code>#main</code> so that its height is equal to that of the browser's viewport.</p>
  
  <p>It works well, except, the calculated padding (and therefore the resultant height) is wrong in one case that I was able to identify.</p>
  
  <p>Easily reproducible <em>at least</em> on <strong>Windows 7, Google Chrome browser</strong> (latest) when you resize the browser window to 567x724 px, which implies 551x611 px viewport size, (you can use an extension like <a href="https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh" rel="nofollow">Window Resizer</a>), you'll notice that the element's calculated padding results in its height being larger than that of the browser's viewport.</p>
  
  <p>Why is this happening? I wasn't able to reproduce the same at any other resolution. What could I possibly be missing here?</p>