title: Bootstrap 3 scrollable div for table
body: <p>I am using Bootstrap 3 with a navbar at the top and a page that displays a table formatted using Bootstrap 3's table class.  I would like the table (which is sitting in its own div) to be the only part of the page that is scrollable (when the width/height of the data in the table exceeds that of the page).  I have styled the div for the table as follows:</p>
  
  <pre><code>.mygrid-wrapper-div {
      overflow: scroll;
      height: 200px;
  }
  </code></pre>
  
  <p>I have a fiddle illustrating this, and I added an ugly 5px red border around the div to highlight the area that I would like to have scrollable:</p>
  
  <p><a href="http://jsfiddle.net/4NB2N/4/">http://jsfiddle.net/4NB2N/4/</a></p>
  
  <p>Notice that scrolling left-to-right works great - I didn't have to do anything to get this to work, and the div adjusts the scrollbar automatically when the window is resized too.  However, I don't know how to setup the div's height to behave the same way - I hardcoded the 200px value but really I would like the div to fill the "rest" of the window so that when the browser is resized it still works.</p>
  
  <p>How can I make the div behave the same both horizontally and vertically?</p>