Twitter Bootstrap: div dans un conteneur avec une hauteur de 100%

129

En utilisant Twitter bootstrap (2), j'ai une page simple avec une barre de navigation, et à l'intérieur de containerje veux ajouter un div avec une hauteur de 100% (en 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 actuel:

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

html, body {
    height: 100%;
}

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

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% du 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 corriger?

css twitter-bootstrap height Matt Roberts
la source
1
Alors vous voulez juste étirer cette div dans toutes les directions?
Andres Ilich
1
Oui, je veux qu'il remplisse l'espace laissé après la div nav
Matt Roberts

Réponses:

129

Réglez la classe .fillsurheight: 100%

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

JSFiddle

(J'ai mis un fond rouge pour #mapque vous puissiez voir qu'il prend 100% de hauteur)

Horen
la source
Merci, je vais essayer plus tard et faire un rapport. Je ne peux pas croire que j'ai raté cette solution simple :)
Matt Roberts
2
Merci, ce genre de travail fonctionne, mais le navigateur de démarrage de Twitter, qui est en position fixe, fait que la carte se déplace vers le bas - vous devez faire défiler vers le bas. Je ne sais pas comment faire en sorte que le div s'étende sur tout l'espace d'écran disponible MOINS la barre de navigation.
Matt Roberts
2
jsfiddle.net/S3Gvf/4 utiliser box-sizing:border-box;sur l'élément avec le rembourrage (balise body) pour une solution de contournement facile
Horen
1
Je ne sais pas trop comment fonctionne ce vaudou css3, mais ça marche :) Merci beaucoup!
Matt Roberts
1
La #map est en fait masquée derrière la barre de navigation dans cet exemple.
Ethereal
37

Mise à jour 2019

Dans Bootstrap 4 , flexbox peut être utilisé pour obtenir une mise en page pleine hauteur qui remplit l'espace restant.

Tout d'abord, le conteneur (parent) doit être de pleine hauteur:

Option 1_ Ajouter une classe pour min-height: 100%;. N'oubliez pas que min-height ne fonctionnera que 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 les vhunités:

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

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

Ensuite, utilisez la colonne de direction flexbox d-flex flex-columnsur le conteneur, et flex-grow-1sur tous les div enfants (c'est-à-dire :) rowque vous voulez remplir la hauteur restante.

Voir aussi:
Bootstrap 4 Navbar et hauteur de remplissage du contenu flexbox
Bootstrap - Remplir le conteneur de fluide entre l'en-tête et le pied de page
Comment étirer la ligne de hauteur restante

Zim
la source
Pourquoi semble-t-il que ces deux approches sont contre-intuitives pour simplement créer un deuxième conteneur qui occupe le reste de la hauteur du bas de la fenêtre? Le développeur devrait avoir la possibilité de faire ce qu'il veut avec bootstrap dans l'espace donné ci-dessus.
klewis
Pensez-vous vraiment que cela mérite un vote défavorable? "créer simplement un deuxième conteneur qui occupe le reste de la hauteur inférieure de la fenêtre" .. avez-vous un exemple de comment cela fonctionnerait? tout height:100%cela ne consomme pas simplement le reste de la hauteur inférieure, mais consomme à la place 100% de la hauteur de la fenêtre créant une barre de défilement verticale. C'est pourquoi la carte nécessite un balayage vers le bas dans la réponse acceptée.
Zim
vous êtes un développeur très respecté sur ces formulaires pour BootStrap. Je ne vous ai pas contre-voté, quelqu'un d'autre l'a fait. Je suis simplement surpris par votre réponse car la plupart de vos réponses sont hautement votées. J'aurais aimé avoir un exemple de la façon dont cela fonctionnait. Je n'ai encore rien trouvé, mais ce serait bien si flexbox avait un moyen facile de remplir le reste d'un élément vers le bas de la page. Merci d'essayer de fournir une réponse, je suppose simplement que nous étions là pour mettre en œuvre facilement cela. Je suppose que non :)
klewis
1
Ok, comme indiqué dans la réponse "utiliser la colonne de direction flexbox d-flex flex-column sur le conteneur, et flex-grow-1 sur tous les divs enfants (ie: row) dont vous voulez remplir la hauteur restante" ... le le parent mesure 100% comme expliqué
Zim
3

C'est très simple. Vous pouvez utiliser

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

Vous pouvez changer la hauteur selon vos besoins.

Sumit Kumar Gupta
la source
1

vous devez ajouter padding-top à l'élément "fill", plus ajouter box-sizing: border-box - exemple ici bootply

Mamezito
la source