title: jQuery - dynamic div height
body: <p>I'm trying to resize a div on pageload and window resize. The code bellow is placed before <code>&lt;/body&gt;</code>, and it works fine on pageload, but does nothing on window resize. I tested the resize function with an alert, which triggers on resize, but the height remains unchanged.</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
      $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
  
      $(window).resize(function(){
          $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
          alert('resized');
      });
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>update:</strong> after a long break, I've discovered what is causing the problem. I'm using a jquery script to add a styled scrollbar on the same div that is being resized. When I comment it out, everything resizes fine. I've moved the scrollbar initialization in the same function as resize, and tried any variations I can think of.. still can't get it to work.</p>
  
  <p>(the #main-content div also has .scroll-pane class) </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  $(function(){
      $('#main-content').css({'height':(($(window).height())-361)+'px'});
      $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});
  
      $(window).resize(function(){
            $('#main-content').css({'height':(($(window).height())-361)+'px'});
      });
  });
  &lt;/script&gt;
  </code></pre>