Twitter Bootstrap: div in container con altezza del 100%

129

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

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

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

MODIFICARE *

Ho aggiunto l'altezza alla classe di riempimento come suggerito di seguito. Ma il problema è che aggiungo una parte superiore imbottita al corpo per tenere conto della barra di navigazione fissa nella parte superiore. Ciò influisce sull'altezza del 100% del div "map" e significa che viene aggiunta una barra di scorrimento - come visto qui: http://jsfiddle.net/S3Gvf/2/ Qualcuno può dirmi come risolvere?

css twitter-bootstrap height

— Matt Roberts
fonte

1

Quindi vuoi solo allungare quel div in tutte le direzioni?

— Andres Ilich,

1

Sì, voglio che riempia lo spazio rimasto dopo il div nav

— Matt Roberts,

129

Impostare la classe .fillsuheight: 100%

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

JSFiddle

(Ho messo uno sfondo rosso per #mapcosì puoi vedere che occupa il 100% di altezza)

— Horen
fonte

Grazie, ci proverò più tardi e riporteremo indietro. Non riesco a credere di aver perso quella semplice soluzione :)

— Matt Roberts,

2

Grazie, questo tipo di lavori, ma il nav di bootstrap di Twitter, che è in posizione fissa, fa andare la mappa dal basso - è necessario scorrere fino in fondo. Non so come estendere il div all'intero spazio disponibile sullo schermo SENZA la barra di navigazione.

— Matt Roberts,

2

jsfiddle.net/S3Gvf/4 utilizza box-sizing:border-box;l'elemento con l'imbottitura (etichetta del corpo) per una soluzione alternativa

— Horen,

1

Non sono troppo sicuro di come funzioni quel voodoo css3, ma funziona :) Grazie mille!

— Matt Roberts,

1

La #map è effettivamente oscurata dietro la barra di navigazione in questo esempio.

— Ethereal,

37

Aggiornamento 2019

In Bootstrap 4 , flexbox può essere utilizzato per ottenere un layout a tutta altezza che riempie lo spazio rimanente.

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

Opzione 1_ Aggiungi una classe 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 vhunità:

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

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

Quindi, l'uso FlexBox colonna di direzione d-flex flex-columnsul contenitore, e flex-grow-1su qualsiasi bambino div (es: row) che si desidera riempire l'altezza rimanente.

Vedi anche:
Bootstrap 4 Navbar e altezza di riempimento del contenuto flexbox
Bootstrap - Riempi il contenitore del fluido tra intestazione e piè di pagina
Come allungare l'altezza rimanente della riga

— Zim
fonte

Perché sembra che entrambi questi approcci siano controintuitivi alla semplice creazione di un secondo contenitore che occupa il resto dell'altezza inferiore della finestra? Dovrebbe esserci flessibilità per lo sviluppatore di fare ciò che vuole con bootstrap nello spazio sopra indicato.

— Klewis,

Pensi davvero che questo meriti un voto negativo? "semplicemente creando un secondo contenitore che occupa il resto dell'altezza inferiore della finestra" .. hai un esempio di come funzionerebbe? il punto è height:100%semplicemente non consumare il resto dell'altezza inferiore, ma consuma invece il 100% dell'altezza della finestra creando una barra di scorrimento verticale. Ecco perché la mappa richiede di scorrere fino in fondo nella risposta accettata.

— Zim,

sei uno sviluppatore rispettato su questi moduli per BootStrap. Non ti ho sottovalutato, lo ha fatto qualcun altro. Sono solo sorpreso dalla tua risposta perché la maggior parte delle tue risposte è molto votata. Vorrei avere un esempio di come ha funzionato. Non ho ancora trovato nulla, ma sarebbe bello se flexbox avesse un modo semplice per riempire il resto di un elemento verso il fondo della pagina. Grazie per aver cercato di fornire una risposta, suppongo che fossimo lì a implementarlo facilmente. Suppongo di no :)

— Klewis il

1

Ok, come indicato nella risposta "usa la colonna di direzione flexbox d-flex-column sul contenitore e flex-grow-1 su tutti i div div (ad esempio: riga) che vuoi riempire l'altezza rimanente" ... il genitore ha un'altezza del 100% come spiegato

— Zim

3

È molto semplice. Puoi usare

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

È possibile modificare l'altezza in base alle proprie esigenze.

— Sumit Kumar Gupta
fonte

1

devi aggiungere padding-top all'elemento "fill", più aggiungere box-sizing: border-box - esempio qui bootply

— Mamezito
fonte