Ich versuche, eine Website, wo die Kopfzeile muss eine Höhe von 13% haben und Abschnitt1 muss den Rest des Bildschirms perfekt ausfüllen und darunter der gleiche Fall mit Abschnitt2 und die Fußzeile Wenn der Benutzer also den ganzen Bildschirm scrollt, passen die letzten beiden auf den Bildschirm.Bootstrap, machen Zeile füllen verbleibenden Bildschirm Platz
Ich war auf eine gute Zeit, das Problem, das ich habe ist, dass der Container nicht über die Höhe hinaus wächst, so gibt es einen Überlauf mit section2 und die Fußzeile wird oben drauf. Ich habe versucht, dies:
Expanding the parent container with 100% height to account for floated content
konnte aber nicht damit es funktioniert.
Mein ursprünglicher Code ist ein Chaos, also habe ich versucht, es zu reinigen, das Beste, was ich konnte, um mich darauf zu konzentrieren. Es sieht wie folgt aus:
HTML
<header> </header>
<div class="container-fluid">
<div id="section1" class="row-fluid fill-height" >
<div class="span6" id="red-space">
<!-- STATIC CONTENT -->
</div>
<div class="span6">
<!-- STATIC CONTENT -->
</div>
</div>
<div id="section2" class="row-fluid fill-height">
<!-- STATIC CONTENT -->
</div>
</div>
CSS
html, body
{
height: 100%;
}
body{
background-color:#fafafa;
color:#5b5b5b;
min-width:0;
}
header, footer {
height: 13%;
}
.container-fluid {
padding: 0;
min-height:83%;
height: 83%;
overflow: hidden;
}
.fill-height{
height:100%;
}