Bootstrap 100% Höhe mit navbar

Dies ist im Grunde, was ich erreichen möchte:Bootstrap 100% Höhe mit navbar

Example

ich die gesamte Seite Höhe zu 100% wollen, aber wenn ich legte die Sidebar und Körper bei 100%, die Seite fügt die 40px vom navbar, so erhalte ich eine Scrollbar, auch wenn es nicht sein sollte.

Ich habe es durch die Verwendung von Tabellen festgelegt, aber ich bin sicher, es muss ein einfacher Weg

<body> 
    <div class="container-fluid"> 
     <div class="navbar"></div> 
     <div class="sidebar"></div> 
     <div class="body"></div> 
    </div> 
</body>

und CSS, was ich bisher habe:

body, html, .container-fluid, .sidebar, .body { 
    height: 100%; 
    min-height: 100%; 
} 
.navbar { 
    height: 40px; 
    position: relative; 
}

Quelle

2013-07-01 user2538584

Sie verlassen nun die Höhe des navbar von der 100% subtrahieren haben. Es gibt mehrere Lösungen, von denen viele JavaScript enthalten, aber Sie werden das nicht brauchen.

1: box-Sizing

Geben der Navigationsleiste eine absolute Position. Dann verschwindet die Frage nach dem Inhalt der anderen Elemente darunter. Dann kommt den nächsten Trick, eine Top-Polsterung, die Größe des navbar hinzuzufügen. Und der letzte Trick, fügen box-sizing: border-box; die .sidebar und .body. Für eine bessere Browser-Unterstützung müssen Sie auch -moz- und -webkit- Präfixe wie so: -moz-box-sizing:

Beispiel: Fiddle to box-sizing

2: Eigentlich subtrahieren.

Verwendung .body, .sidebar{ height: calc(100% - 40px); Browser-Unterstützung ist ~~sehr minimal für das, was ich weiß,~~ weniger als für Box-Sizing, so würde ich die erste Lösung empfehlen. Calc explained on css-tricks

3: Flexbox (hinzugefügt anno 2015)

Sie sollten jetzt wohl gehen mit Calc verwenden, wenn Sie die Höhe kennen, aber eine wunderbare Ersatz Tabellen für die Verwendung ist Flexbox. Dies ist wirklich mein Retter für komplexe Designs in responsiven Websites. Durch eine der besten Eigenschaften mit - flex-shrink: 0 - auf der Kopfzeile können Sie andere Elemente zwingen, in sich selbst Einstellung der Rest des Behälters zu füllen.

Eine alte Antwort ist wahrscheinlich nicht der beste Ort zu schreiben, eine umfangreiche Führung nach unten auf Flexbox so wieder ein großer Link zu css-tricks

Quelle

2013-07-01 10:34:03

In Bezug auf' calc() 'Unterstützung ist es tatsächlich [überraschend gut] (http://caniuse.com/#feat=calc). Ich hatte auch den Eindruck, dass Support fast nicht existierte. – Bojangles

Danke, habe meine Antwort mit diesem Wissen bearbeitet. Leider hat IE8 immer noch einen annehmbaren Marktanteil. Ich hätte wissen müssen, dass ich diese Seite vorher überprüft habe. Mein Verstand interpretierte es wahrscheinlich als - kann nicht für eigenes Projekt verwenden, also keine Unterstützung - –

Vielen Dank !!! – user2538584

Wahrscheinlich, weil es fügt den Standardrand von der Navigationsleiste hinzu. Versuchen Sie folgendes:

.navbar { 
    height: 40px; 
    position: relative; 
    margin: 0; 
    padding: 0; 
}

Versuchen Sie auch, die min bis max Höhe zu verändern:

max-height: 100% !important;

Quelle

2013-07-01 10:21:20

Aber dann wird die Seite mir noch eine 40px Scrollbar, weil die Seitenleiste und Körper div ist in der Höhe von 100% ergibt, und die navbar ist in der Höhe 40px, die zu 100% + 40px – user2538584

@ user2538584 Überprüfen Sie die Bearbeitung. Überprüfen Sie, ob das funktioniert. –

'.navbar { Zeilenhöhe: 50px; Rand: 0; Polsterung: 0; } 'arbeitet für mich – sky91

-1

ich einen litle Code ändern, indem Sie einen Behälter um die Seitenleiste hinzufügen und Körper Klasse:

Hier ist die RESULT

Css:

body, html, .container-fluid, .sidebar, .body { 
    height: 100%; 
    min-height: 100%; 
} 

#container{ 
    width:100%; 
    height:100%; 
} 


.sidebar{ 
    background-color: green; 
    width:10%; 
    float:left; 
    height:100%; 

} 

.body{ 
    background-color: orange; 
    float:left; 
    width:90%; 
    height:100%; 

} 

.navbar { 
    height: 40px; 
    position: relative; 
    background-color: yellow; 
    width:100%; 
}

HTML

<div class="container-fluid"> 
    <div class="navbar"> 
     navbar 
    </div> 
    <div id="container"> 
     <div class="sidebar"> 
      sidebar 
     </div> 
     <div class="body"> 
      body 
     </div> 
     </div> 
</div> 

</body>

Quelle

2013-07-01 10:34:12 Romain

Danke aber dann bekomme ich immer noch eine 40px Bildlaufleiste – user2538584

Bootstrap 100% Höhe mit navbar

Antwort

Verwandte Themen