title: Make table 100% with fixed header with smart table angular
body: <p><a href="http://plnkr.co/edit/GIeXoF?p=preview" rel="nofollow">http://plnkr.co/edit/GIeXoF?p=preview</a></p>
  
  <p>How can I make this table with a height of 100% height but the header must still remain fixed?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
    &lt;head&gt;
      &lt;link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /&gt;
      &lt;script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;script src=smart-table.debug.js&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="mainCtrl"&gt;
      &lt;table  class="table table-striped"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th st-ratio="20" st-sort="firstName"&gt;first name&lt;/th&gt;
          &lt;th st-ratio="20" st-sort="lastName"&gt;last name&lt;/th&gt;
          &lt;th st-ratio="10" st-sort="age"&gt;age&lt;/th&gt;
          &lt;th st-ratio="30" st-sort="email"&gt;email&lt;/th&gt;
          &lt;th st-ratio="20" st-sort="balance"&gt;balance&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr ng-repeat="row in displayed"&gt;
          &lt;td st-ratio="20"&gt;{{row.firstName}}&lt;/td&gt;
          &lt;td st-ratio="20"&gt;{{row.lastName | uppercase}}&lt;/td&gt;
          &lt;td st-ratio="10"&gt;{{row.age}}&lt;/td&gt;
          &lt;td st-ratio="30"&gt;{{row.email}}&lt;/td&gt;
          &lt;td st-ratio="20"&gt;{{row.balance | currency}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;td colspan="5" class="text-center"&gt;
              &lt;div  st-items-by-page="20" st-pagination=""&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  
  table {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      height: 500px; /* this can vary */
  }
  
  table * {
      box-sizing: inherit;
      -moz-box-sizing: inherit;
  }
  
  thead {
      display: flex;
      flex-direction: column;
      align-items: stretch;
  }
  
  tbody {
      overflow-y: scroll;
      display: inline-block;
  }
  
  thead &gt; tr, tbody &gt; tr, tfoot &gt; tr {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
  }
  
  thead, tfoot {
      flex-shrink: 0;
  }
  
  th, tbody td {
      width: 20%; /* this can vary */
      overflow-x: hidden;
      text-overflow: ellipsis;
      display: inline-block;
  }
  
  tfoot {
      display: inline-block;
  }
  
  tfoot td {
      width: 100%;
      display: inline-block;
  }
  </code></pre>