web-dev-qa-db-fra.com

Twitter Bootstrap: div en conteneur avec 100% de hauteur

En utilisant Twitter bootstrap (2), j'ai une simple page avec une barre de navigation, et à l'intérieur de la container je veux ajouter un div avec 100% de hauteur (au bas de l'écran). Mon css-fu est rouillé et je ne peux pas résoudre ce problème.

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 en cours:

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

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}
  • MODIFIER *

J'ai ajouté de la hauteur à 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 on le voit ici: http://jsfiddle.net/S3Gvf/2/ Quelqu'un peut-il me dire comment y remédier ?

csstwitter-bootstrapheight
116
Matt Roberts

Définissez la classe .fill sur height: 100%

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

JSFiddle

(Je mets un fond rouge pour #map afin que vous puissiez voir qu'il prend 100% de la hauteur)

117
Horen

Mise à jour 2018

Dans Bootstrap 4 , flexbox peut être utilisé pour obtenir une présentation full height qui remplit l'espace restant. .

Tout d’abord, le conteneur (parent) doit être de hauteur totale:

Option 1_ Ajouter une classe pour min-height: 100%;. Rappelez-vous que min-height fonctionnera seulement ​​si le parent a une hauteur définie:

html, body {
  height: 100%;
}

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

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

Option 2_ Utilisez vh unités:

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

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

Ensuite, utilisez flexbox colonne de direction d-flex flex-column sur le conteneur et flex-grow-1 sur tout enfant divs ( c'est-à-dire: row) que vous souhaitez remplir la hauteur restante.

Regarde aussi:
Bootstrap 4 Navbar et flexbox de hauteur de remplissage du conten
Bootstrap - Remplir le réservoir de liquide entre l’en-tête et le pied de page
Bootstrap 4: Comment faire pour que la ligne étire la hauteur restante?

21
Zim

C'est très simple. Vous pouvez utiliser

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

Vous pouvez changer de hauteur selon vos besoins.

1
Sumit Kumar Gupta

vous devez ajouter padding-top à l'élément "fill", ainsi que la taille de la boîte: border-box - sample here bootply

1
mamezito