title: How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?
body: <p>I am trying to create 2 independently scrollable columns (left and right) using the Bootstrap 3 grid, which should dynamically change their height depending on the browser's windows size and are offset by a top-padding of 100px for a navigation bar. At the moment I have to set a fixed height (600px), which obviously doesn't scale very well on different screen sizes.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.left {
      height: 600px;
      overflow: auto;
  }
  
  .right {
      height: 600px;
      overflow: auto;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
  
     &lt;div class="col-md-9 left scrollable"&gt;
  
         // Content Left Column
  
     &lt;/div&gt;
  
     &lt;div class="col-md-3 right scrollable"&gt;
  
         // Content Right Column
  
     &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I already tried to put them in a #testdiv and change its' height with a Javscript / jQuery solution, which doesn't seem to work:</p>
  
  <pre><code>$('#testdiv').height($(window).height() - 100)
  </code></pre>
  
  <p>Would appreciate your advise.</p>