2015-05-22 13 views
5

Tu jest link do repo:Jak zrobić przewijany pasek startowy o wysokości 100%?

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

Mamy tabelę:

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

która odbywa się w przybliżeniu 75% wysokości strony, staram się dostać tak, że rozciąga się na całą wysokość (od nagłówka w dół) strony.

Próbowałem:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

który skutecznie sprawia pełną wysokość ciała ale tabela nie automatyczne rozciągnięcie wypełnić tę przestrzeń ..

Dzięki

+0

Why nie używasz flexbox zamiast tabel? – Wawy

Odpowiedz

6

Dlaczego nie ustawić wysokość stołu używając viewport percentage lengths?

table{ 
    height:100vh; 
} 

długości rzutni procentach określono długość w stosunku do wielkości widoku, to jest widoczna część dokumentu.

Alternatywnie, z dołączonym kodem, wysokość tabeli nie będąc SEt- więc może warto dodać height:100% (jak również do body), jeśli nie czujesz się jak za pomocą vh.

Ponownie, nie widząc więcej kodu, trudno jest zapewnić bardziej dostosowane rozwiązanie, innym rozwiązaniem byłoby zrobić:

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

Przy założeniu tabela jest bezpośrednim potomkiem body

+0

Nie ma szczęścia z okienkiem ani wysokością 100%, nie zmienia się. –

+0

Czy możesz umieścić samodzielny przykład w pytaniu? Nie można go odtworzyć za pomocą obecnego kodu (bez brodzenia przez GitHub). – SW4

+0

procent wysokości na elementach blokowych działa tylko wtedy, gdy jest ustawiony bezwzględnie lub gdy rodzic ma ustaloną wysokość, więc tylko 100% nie będzie działać – bugwheels94

Powiązane problemy