title: Sticking HTML 5 table footer at bottom of the page
body: <p>Look at the table. It has 3 sections: </p>
  
  <ul>
  <li>Column headers</li>
  <li>3 rows with values </li>
  <li>One footer</li>
  </ul>
  
  <p>I am trying to stick the footer at bottom of the page. Table height needs to be resizable, and I need to place a vertical scroll bar if the rows with values exceed the table height limits. I don’t want to expand the row height of the value. Is there a way to do that? (only html/css).</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="table"&gt;
          &lt;div class="row headers"&gt;
              &lt;div class="cell col1"&gt;Col1&lt;/div&gt;
              &lt;div class="cell col2"&gt;Col2&lt;/div&gt;
              &lt;div class="cell col3"&gt;Col3&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="cell col1"&gt;1&lt;/div&gt;
              &lt;div class="cell col2"&gt;2&lt;/div&gt;
              &lt;div class="cell col3"&gt;3&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="cell col1"&gt;1&lt;/div&gt;
              &lt;div class="cell col2"&gt;2&lt;/div&gt;
              &lt;div class="cell col3"&gt;3&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="cell col1"&gt;1&lt;/div&gt;
              &lt;div class="cell col2"&gt;2&lt;/div&gt;
              &lt;div class="cell col3"&gt;3&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row footers"&gt;
              &lt;div class="cell col1"&gt;Footer&lt;/div&gt;
              &lt;div class="cell col2"&gt;&lt;/div&gt;
              &lt;div class="cell col3"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Styles:</p>
  
  <pre><code>.table{
      display:table;
      width: 100%;
      border: 1px solid #000;
      background: #eee;
  }
  .row{
      display:table-row;
  }
  .headers { color: #505; font-weight: bold;}
  .footers { color: #055;}
  .cell{
      background: #eee;
      display:table-cell;
      border: 1px solid #fff;
  }
  
  .col1 { width:50%;}
  .col2 { width:25%;}
  .col3 { width:25%;}
  </code></pre>
  
  <p><strong>Edit:</strong> My table needs to be vertically expandable, and it needs to show a scroll bar when the rows inside header/footer overflows the table height.</p>