Bootstrap Twitter: div en conteneur avec une hauteur de 100%
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 une hauteur de 100% (au bas de l'écran). Mon css-fu est rouillé, et je n'y arrive pas.
simple 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>
Current CSS:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
- EDIT *
j'ai ajouté la hauteur à la classe de remplissage comme suggéré ci-dessous. Mais, le problème est-ce que j'ajoute un rembourrage-top au corps pour tenir compte de la barre fixe au sommet. 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éparer?
3 réponses
mise à Jour 2018
dans Bootstrap 4 , flexbox peut être utilisé pour obtenir un complet hauteur disposition qui remplit l'espace restant.
tout d'abord, le conteneur (parent) doit avoir une hauteur maximale:
Option 1_ ajouter une classe pour min-height: 100%; . Rappelez-vous que la hauteur minimale seulement fonctionne si le parent a une hauteur définie:
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://www.codeply.com/go/dTaVyMah1U
Option 2_ Utiliser vh parts:
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
ensuite, utilisez la colonne de direction de flexbox d-flex flex-column sur le conteneur, et flex-grow-1 sur tout enfant divs (i.e.: row ) que vous voulez remplissez la hauteur restante.
Voir Aussi:
Bootstrap 4 Navbar et content fill height flexbox
Bootstrap-remplir le réservoir de liquide entre l'en-tête et le pied de page
Bootstrap 4: Comment faire pour que la rangée étire la hauteur restante?