title: jQuery - dynamic div height equal to the height of the whole window
body: <p>i am using the code found here <a href="https://stackoverflow.com/questions/1443465/jquery-dynamic-div-height">jQuery - dynamic div height</a></p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  $(function(){
      $('#center').css({'height':(($(window).height())-162)+'px'});
  
      $(window).resize(function(){
      $('#center').css({'height':(($(window).height())-162)+'px'});
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>now the height change works fine when you resize the window, but if your scroll down the height does not change, this means the window property does not include things beyond the size of the browser window so if you scroll down the height does not increase</p>
  
  <p>so what can i add that will be the size of the whole content not the window size</p>
  
  <p>ANSWER
  use document instead of window</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
      $(function(){
          $('#center').css({'height':(($(document).height())-162)+'px'});
  
          $(window).resize(function(){
          $('#center').css({'height':(($(document).height())-162)+'px'});
          });
      });
  &lt;/script&gt;
  </code></pre>