Come rendere un tavolo di bootstrap scorrevole al 100% di altezza?

Question

Ecco un link al repo:

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

Abbiamo un tavolo:

<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> 

che occupa circa il 75% dell'altezza della pagina, sto cercando di ottenere in modo che stenda l'intera altezza (dall'intestazione in basso) della pagina.

ho provato:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

che rende con successo l'intera altezza del corpo, ma il tavolo non tratto auto per riempire quello spazio ..

Grazie

Answer 1

Perché non impostare l'altezza del tavolo utilizzando viewport percentage lengths?

table{ 
    height:100vh; 
} 

lunghezze Viewport-percentuale definita una lunghezza relativamente alla dimensione del finestra, cioè la parte visibile del documento.

In alternativa, dal codice fornito, l'altezza del tavolo non è ritirata dalla quindi si consiglia di aggiungere height:100% (così come a body) se non avete voglia di utilizzare vh.

Anche in questo caso, senza vedere più codice, la sua difficile per fornire una soluzione più su misura, un altro approccio sarebbe quello di fare:

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

Sul presupposto tavolo è un figlio diretto del body