How to make a scrollable bootstrap table at 100% height?

Question

Here is the repo link:

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 occupies approximately 75% of the page height, I am trying to get it so that it stretches the entire height (from the heading down) of the page.

I tried:

 html { height: 100%; } body { min-height: 100%; } 

which successfully makes the body full height, but the table did not stretch automatically to fill this space.

thanks

Answer 1

Why not set the table height using percentages in the viewport ?

 table{ height:100vh; } 

The percentage of length in the context of viewing determines the length relative to the size of the viewport, that is, the visible part of the document.

Alternatively, from the provided code, the table height is not set, so you can add height:100% (as well as in body ) if you don't like using vh .

Again, without seeing more code, it is difficult to provide a more individual solution, you will need to take a different approach:

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

Assuming the table is a direct child of the body