Twitter Bootstrap: Div in Container mit 100% Höhe

129

Mit Twitter Bootstrap (2) habe ich eine einfache Seite mit einer Navigationsleiste, und innerhalb der containermöchte ich ein Div mit 100% Höhe hinzufügen (am unteren Bildschirmrand). Mein CSS-Fu ist rostig und ich kann das nicht herausfinden.

Einfaches 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>

Aktuelles CSS:

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

html, body {
    height: 100%;
}

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

Ich habe der Füllklasse die Höhe hinzugefügt, wie unten vorgeschlagen. Das Problem ist jedoch, dass ich dem Körper ein Polsteroberteil hinzufüge, um die feste Navigationsleiste oben zu berücksichtigen. Dies wirkt sich auf die 100% -Höhe des "Map" -Divs aus und bedeutet, dass eine Bildlaufleiste hinzugefügt wird - wie hier zu sehen: http://jsfiddle.net/S3Gvf/2/ Kann mir jemand sagen, wie ich das beheben soll?

css twitter-bootstrap height Matt Roberts
quelle
1
Also willst du das Div einfach in alle Richtungen strecken?
Andres Ilich
1
Ja, ich möchte, dass es den Raum ausfüllt, der nach dem Navi Div übrig bleibt
Matt Roberts

Antworten:

129

Setzen Sie die Klasse .fillaufheight: 100%

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

JSFiddle

(Ich habe einen roten Hintergrund eingefügt, #mapdamit Sie sehen können, dass er 100% der Höhe einnimmt.)

Horen
quelle
Danke, werde das später versuchen und zurückmelden. Ich kann nicht glauben, dass ich diese einfache Lösung verpasst habe :)
Matt Roberts
2
Vielen Dank, diese Art von funktioniert, aber das Twitter-Bootstrap-Navi, das eine feste Position hat, lässt die Karte von unten verschwinden - Sie müssen nach unten scrollen. Ich weiß nicht, wie ich die Div-Spanne auf den gesamten verfügbaren Bildschirmbereich abzüglich der Navigationsleiste einstellen soll.
Matt Roberts
2
jsfiddle.net/S3Gvf/4 Verwendung box-sizing:border-box;auf dem Element mit der Polsterung (Body-Tag) für eine einfache Problemumgehung
Horen
1
Ich bin mir nicht sicher, wie das CSS3-Voodoo funktioniert, aber es funktioniert :) Vielen Dank!
Matt Roberts
1
Die #map ist in diesem Beispiel tatsächlich hinter der Navigationsleiste verdeckt.
Ätherisch
37

Update 2019

In Bootstrap 4 kann Flexbox verwendet werden, um ein Layout mit voller Höhe zu erhalten, das den verbleibenden Platz ausfüllt.

Zunächst muss der Container (übergeordnetes Element) die volle Höhe haben:

Option 1_ Fügen Sie eine Klasse für hinzu min-height: 100%;. Denken Sie daran, dass die Mindesthöhe nur funktioniert, wenn der Elternteil eine definierte Höhe hat:

html, body {
  height: 100%;
}

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

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

Option 2_ vhEinheiten verwenden:

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

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

Dann Verwendung Flexbox Richtung Säule d-flex flex-columnauf den Behälter und flex-grow-1auf jedem Kind divs (dh row) , dass Sie die verbleibende Höhe füllen wollen.

Siehe auch:
Bootstrap 4 Navbar und Inhalt Füllhöhe Flexbox
Bootstrap - Fill Flüssigkeitsbehälter zwischen Kopf- und Fußzeile
Wie die Zeile Strecke Resthöhe machen

Zim
quelle
Warum scheinen diese beiden Ansätze nicht intuitiv zu sein, um einfach einen zweiten Container zu erstellen, der den Rest der unteren Höhe des Fensters einnimmt? Der Entwickler sollte die Flexibilität haben, mit Bootstrap in dem oben angegebenen Bereich zu tun, was er will.
Klewis
Denken Sie wirklich, dass dies eine Ablehnung verdient? "Erstellen Sie einfach einen zweiten Container, der den Rest der unteren Höhe des Fensters einnimmt." Haben Sie ein Beispiel dafür, wie das funktionieren würde? Der springende Punkt ist, height:100%dass nicht nur der Rest der unteren Höhe verbraucht wird, sondern 100% der Höhe des Ansichtsfensters, wodurch eine vertikale Bildlaufleiste erstellt wird. Aus diesem Grund muss die Karte in der akzeptierten Antwort nach unten gescrollt werden.
Zim
Sie sind ein angesehener Entwickler dieser Formulare für BootStrap. Ich habe dich nicht abgelehnt, jemand anderes hat es getan. Ich bin nur überrascht von Ihrer Antwort, weil die meisten Ihrer Antworten hoch bewertet sind. Ich wünschte, ich hätte ein Beispiel dafür, wie das funktioniert. Ich habe noch nichts gefunden, aber es wäre schön, wenn Flexbox den Rest eines Elements auf einfache Weise am Ende der Seite ausfüllen könnte. Vielen Dank, dass Sie versucht haben, eine Antwort zu geben. Ich würde nur annehmen, dass wir bei der einfachen Implementierung dabei waren. Ich denke nicht :)
Klewis
1
Ok, wie in der Antwort angegeben "Verwenden Sie die Flexbox-Richtungsspalte d-Flex-Flex-Spalte für den Container und Flex-Grow-1 für alle untergeordneten Divs (dh: Zeile), die die verbleibende Höhe ausfüllen sollen" ... die Elternteil ist 100% groß wie erklärt
Zim
3

Es ist sehr einfach. Sie können verwenden

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

Sie können die Höhe entsprechend Ihren Anforderungen ändern.

Sumit Kumar Gupta
quelle
1

Sie müssen Padding-Top hinzufügen, um das Element zu füllen, und Box-Sizing hinzufügen: Border-Box - Beispiel hier bootply

Mamezito
quelle