Bootstrap su Twitter: div in contenitore con altezza 100%

Utilizzando twitter bootstrap (2), ho una pagina semplice con una barra di navigazione e all'interno di container voglio aggiungere un div con altezza 100% (alla fine del schermo). Il mio css-fu è arrugginito e non riesco a risolverlo.Bootstrap su Twitter: div in contenitore con altezza 100%

semplice HTML:

<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%; 
}

EDIT *

ho altezza aggiunta alla classe di riempimento come suggerito qui di seguito. Ma il problema è che aggiungo un padding-top al corpo per tenere conto della barra di navigazione fissa in alto. Ciò influenza l'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?

fonte

2012-07-26 Matt Roberts

Quindi vuoi solo allungare quel div in tutte le direzioni? –

Sì, lo voglio riempire lo spazio rimasto dopo il div nav. –

impostare la classe .fill a height: 100%

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

JSFiddle

(ho messo uno sfondo rosso per #map modo da poter vedere che occupa 100% altezza)

fonte

2012-07-26 21:07:16 Horen

Grazie, proverò più tardi e riferirò. Non posso credere di aver perso quella semplice soluzione :) –

Grazie, questo tipo di lavoro, ma il navigatore di boot di twitter, che è in posizione fissa, fa andare la mappa fuori dal fondo - è necessario scorrere verso il basso. Non so come rendere l'intervallo div all'intero spazio dello schermo disponibile MENO la barra di navigazione. –

puoi aggiungere la tua barra di navigazione a jsfidlle in modo che possa vedere il problema? – Horen

è necessario aggiungere imbottitura -top per "riempire" l'elemento, inoltre aggiungere il ridimensionamento della casella: border-box - campione qui bootply

fonte

2015-08-17 13:34:33 mamezito

Bootstrap su Twitter: div in contenitore con altezza 100%

risposta

Problemi correlati