Wie macht man einen scrollbaren Bootstrap-Tisch 100% Höhe?

Question

Hier ist ein Link zu dem Repo:

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

Wir haben eine Tabelle:

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

, die etwa 75% der Höhe der Seite einnimmt, ich versuche zu bekommen es so, dass es die volle Höhe (von der Kopfzeile abwärts) der Seite streckt.

Ich habe versucht:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

, die erfolgreich den Körper voller Höhe macht aber die Tabelle hat nicht automatisch strecken, dass der Raum zu füllen ..

Dank

Answer 1

Warum nicht die Tischhöhe einstellen mit viewport percentage lengths?

table{ 
    height:100vh; 
} 

Ansichtsfenster-Prozentsatz Längen eine Länge definiert, relativ zu der Größe des Darstellungsfeldes, das ist der sichtbare Teil des Dokuments.

Alternativ aus dem bereitgestellten Code wird die Tischhöhe ist nicht Set- so können Sie height:100% (sowie body) hinzufügen, wenn Sie wie mit vh fühlen nicht.

Wieder ohne mehr Code zu sehen, ist es schwer eine maßgeschneiderte Lösung zur Verfügung zu stellen, wäre ein anderer Ansatz zu tun:

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

Unter der Annahme, der Tisch ist ein direkter Nachkomme der body