title: Fixed height for bootstrap pre-scrollable DIV
body: <p>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. </p>
  
  <p>This is my HTML code </p>
  
  <pre><code>&lt;div class="col-md-9"&gt;
  &lt;div  class="pre-scrollable"&gt;
  &lt;table class="table table-bordered table-hover header-fixed"  id="sometable"&gt;
                      &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th&gt;EMP_No&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Designation&lt;/th&gt;
                      &lt;th&gt;Department&lt;/th&gt;
                      &lt;th&gt;Type&lt;/th&gt;
                      &lt;th&gt;#Days&lt;/th&gt;
                      &lt;th&gt;Start Date&lt;/th&gt;
                      &lt;th&gt;End Date&lt;/th&gt;
                      &lt;th&gt;Half day&lt;/th&gt;
                      &lt;th&gt;Status&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;/tbody&gt;
                  &lt;?php  //php code for print the table
                   ?&gt;
  &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>&lt;style&gt;
  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;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><a href="http://imgur.com/a/pdowa" rel="noreferrer">This is the result web page</a></p>