In my application I have to display bootsatarp grid for database records. Since the number of records count are large enough to view without full page scrolling I wrap my table with bootstrap pre-scrollable div and it gave me the functionality to scroll the table. However all the time DIV size is half of the browser windows. I tried almost every stack overflow posts and suggestions and simply they not work for me. I also tried to fix this with support of java script and it also failed.

This is my HTML code

<div class=col-md-9>

<div  class=pre-scrollable>

<table class=table table-bordered table-hover header-fixed  id=sometable>

                    <thead>

                  <tr>

                    <th>EMP_No</th>

                    <th>Name</th>

                    <th>Designation</th>

                    <th>Department</th>

                    <th>Type</th>

                    <th>#Days</th>

                    <th>Start Date</th>

                    <th>End Date</th>

                    <th>Half day</th>

                    <th>Status</th>

                  </tr>

                </thead>

                <tbody>

                </tbody>

                <?php  //php code for print the table

                 ?>

</div>      

</div>

I populate above table with the results of PHP code. I have not idea how to set this DIV's height to fixed value or full value of the browser windows.below are the CSS that are use

<style>

table {

    font-family: arial, sans-serif;

    border-collapse: collapse;

    width: 100%;

}

td, th {

    border: 1px solid #dddddd;

    text-align: center;

    padding: 1px;

}

thead th {

    text-align: center;

    background-color: #3498db;

}

tr:nth-child(even) {

    background-color: #dddddd;

}

</style>

This is the result web page