Twitter Bootstrap: div dans le conteneur avec 100% de hauteur

En utilisant twitter bootstrap (2), j'ai une page simple avec une barre de navigation, et à l'intérieur du container je veux ajouter un div avec 100% de hauteur (au bas de la écran). Mon css-fu est rouillé, et je ne peux pas faire ça.Twitter Bootstrap: div dans le conteneur avec 100% de hauteur

HTML simple:

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

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

html, body { 
    height: 100%; 
} 

.fill { 
    min-height: 100%; 
}

EDIT *

J'ai la hauteur ajoutée à la classe de remplissage comme suggéré ci-dessous. Mais, le problème est que j'ajoute un padding-top au corps pour tenir compte de la barre de navigation fixe en haut. Cela affecte la hauteur de 100% de la div "map" et signifie qu'une barre de défilement est ajoutée - comme vu ici: http://jsfiddle.net/S3Gvf/2/ Quelqu'un peut-il me dire comment résoudre ce problème?

Source

2012-07-26 Matt Roberts

Donc vous voulez juste étendre ce div dans toutes les directions? –

Oui, je le veux pour remplir l'espace laissé après la div nav –

Définir la classe .fill à height: 100%

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

JSFiddle

(je mets un fond rouge pour #map afin que vous puissiez le voir prend une hauteur de 100%)

Source

2012-07-26 21:07:16 Horen

Merci, va essayer cela plus tard et faire rapport. Je ne peux pas croire que j'ai manqué ce simple correctif :) –

Merci, ce genre de travaux, mais la navigation de bootstrap Twitter, qui est la position fixe, rend la carte aller au fond - vous devez faire défiler vers le bas. Je ne sais pas comment faire le div diviser tout l'espace de l'écran disponible MOINS la barre de navigation. –

pouvez-vous ajouter votre barre de navigation à la jsfidlle afin que je puisse voir le problème? – Horen

vous devez ajouter un rembourrage -pour ajouter à l'élément "fill", plus ajouter taille-case: border-box - échantillon ici bootply

Source

2015-08-17 13:34:33 mamezito

Twitter Bootstrap: div dans le conteneur avec 100% de hauteur

Répondre

Questions connexes