Twitter Bootstrap: div in contenitore con altezza 100%

Usando twitter bootstrap (2), ho una pagina semplice con una barra di navigazione, e all’interno del container voglio aggiungere un div con altezza del 100% (nella parte inferiore dello schermo). Il mio css-fu è arrugginito e non riesco a risolverlo.

HTML semplice:

   

CSS corrente:

 #map { width: 100%; height: 100%; min-height: 100%; } html, body { height: 100%; } .fill { min-height: 100%; } 
  • MODIFICARE *

Ho aggiunto l’altezza alla class di riempimento come suggerito di seguito. Ma il problema è che aggiungo un padding-top al corpo per tenere conto della barra di navigazione fissa in alto. Questo influenza l’altezza del 100% del div “map” e significa che viene aggiunta una barra di scorrimento, come si vede qui: http://jsfiddle.net/S3Gvf/2/ Qualcuno può dirmi come risolvere?

Imposta la class. .fill in height: 100%

 .fill { min-height: 100%; height: 100%; } 

JSFiddle

(Ho messo uno sfondo rosso per #map modo che tu possa vedere che occupa il 100% di altezza)

devi aggiungere padding-top all’elemento “fill”, inoltre aggiungi il ridimensionamento della casella: border-box – prova qui bootply

Aggiornamento 2018

In Bootstrap 4 , è ansible utilizzare la flexbox per ottenere un layout a tutta altezza che riempie lo spazio rimanente.

Prima di tutto, il contenitore (genitore) deve essere a tutta altezza:

Opzione 1_ Aggiungi una class per min-height: 100%; . Ricorda che l’altezza minima 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 unità vh :

 .vh-100 { min-height: 100vh; } 

https://www.codeply.com/go/kMahVdZyGj

Quindi, utilizzare la colonna d-flex flex-column direction d-flex flex-column column d-flex flex-column sul contenitore e flex-grow-1 su qualsiasi div child (cioè: row ) che si desidera riempire l’altezza rimanente.

Vedi anche:
Bootstrap 4 Navbar e flexbox di riempimento del contenuto
Bootstrap: riempire il contenitore del fluido tra l’intestazione e il piè di pagina
Bootstrap 4: Come rendere la riga allungare l’altezza rimanente?