Bootstrap 3 scrollable div for table

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?

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.

Well one way to do it is set the height of your body to the height that you want your page to be. In this example I did 600px.

Then set your wrapper height to a percentage of the body here I did 70% This will adjust your table so that it does not fill up the whole screen but in stead just takes up a percentage of the specified page height.

body {
   padding-top: 70px;
   border:1px solid black;
   height:600px;
}

.mygrid-wrapper-div {
   border: solid red 5px;
   overflow: scroll;
   height: 70%;
}

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

Update How about a jQuery approach.

$(function() {  
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

$( window ).resize(function() {
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

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

You can use too

style="overflow-y: scroll; height:150px; width: auto;"

It's works for me