Bootstrap 3 scrollable div for table

Question

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:

.mygrid-wrapper-div {     overflow: scroll;     height: 200px; } 

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:

http://jsfiddle.net/4NB2N/4/

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.

How can I make the div behave the same both horizontally and vertically?

Answer 1

A scrolling comes from a box with class pre-scrollable

<div class="pre-scrollable"></div> 

There's more examples: http://getbootstrap.com/css/#code-block
Wish it helps.