How to make a scrollable bootstrap table 100% height?

Question

Here is a link to the repo:

https://github.com/MoviesAroundMe/MoviesAroundMe2/tree/viewTemplate

We have a table:

  <table class="table table-hover movie-list-table">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
  </table>

which takes up roughly 75% of the height of the page, I'm trying to get it so that it stretches the full height (from the header down) of the page.

I tried:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

which successfully makes the body full height but the table didn't auto stretch to fill that space..

Thanks

Answer 1

Why not set the table height using viewport percentage lengths?

table{
   height:100vh;
}

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.

Alternatively, from the provided code, the table height is not being set- so you may want to add height:100% (as well as to body) if you dont feel like using vh.

Again, without seeing more code, its hard to provide a more tailored solution, another approach would be to do:

body{
   height:100%;
   position:relative;
}
table{
   position:absolute;
   top:0;
   bottom:0;
}

On the assumption the table is a direct child of the body