Usando twitter bootstrap (2), ho una pagina semplice con una nav bar, e dentro il container
voglio aggiungere un div con altezza 100% (fino al fondo dello schermo). Il mio css-fu è arrugginito, e non riesco a risolvere questo problema.
HTML semplice:
<body>
<div class="navbar navbar-fixed-top">
<!-- Rest of nav bar chopped from here -->
</div>
<div class="container fill">
<div id="map"></div> <!-- This one wants to be 100% height -->
</div>
</body>
CSS corrente:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
Ho aggiunto l'altezza alla classe di riempimento come suggerito di seguito. Ma, il problema è che aggiungo un padding-top al corpo per tenere conto della navbar fissa in alto. Questo influenza l'altezza al 100% del "map" div e significa che una barra di scorrimento viene aggiunta - come visto qui:
Qualcuno può dirmi come risolvere il problema?Aggiornamento 2019
In Bootstrap 4, flexbox può essere utilizzato per ottenere un layout ad altezza piena che riempie lo spazio rimanente.
Prima di tutto, il contenitore (genitore) deve essere a tutta altezza:
Opzione 1_ Aggiungi una classe per min-height: 100%;
. Ricordate che min-height funzionerà solo se il genitore ha un'altezza definita:
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://www.codeply.com/go/dTaVyMah1U
Opzione 2_ Usa le unità vh
:
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
Poi, usa la colonna di direzione flexbox d-flex flex-column
sul contenitore, e flex-grow-1
su qualsiasi div child (cioè: row
) che vuoi riempire l'altezza rimanente.
Vedi anche:
https://stackoverflow.com/questions/49191957
https://stackoverflow.com/questions/15641142/
https://stackoverflow.com/questions/42194886/bootstrap-4-how-to-make-the-row-stretch-remaining-height/42195475#42195475