Wie wird der Inhalt des Bootstrap Sticky Footers auf volle Seitenhöhe gebracht?

Question

Ich verwende ein Boostrap-Beispiel, um eine CSS-Fußzeile für eine Website zu erstellen. Dies funktioniert einwandfrei, da die Fußzeile am unteren Rand der Seite bleibt, wenn die Größe der Seite geändert wird. Auf einer Reihe von Seiten habe ich Inhalte, die praktisch die ganze Seite angezeigt werden müssen, abgesehen von der Fußzeile. Der Inhaltsbereich der Seite muss daher auf 100% Höhe eingestellt werden, damit sein Inhalt wiederum auf volle Höhe angepasst werden kann.

Here's a JSFiddle that demonstrates the problem.

Wie können wir die grünen Container div volle Höhe zu machen, so dass es berührt die Seite nach oben an der Spitze und die Spitze der Fußzeile am Ende?

Danke!

<div id="wrap"> 
    <!-- Begin page content --> 
    <div class="container"> 
     <div class="page-header"> 
      <h1>Sticky footer</h1> 

     </div> 
     <p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p> 
     <p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p> 
    </div> 
    <div id="push"></div> 
</div> 
<div id="footer"> 
    <div class="container"></div> 
</div> 

---

#wrap .container { 
    background-color: lightgreen; 
} 
/* Sticky footer styles */ 
html, body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 
/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
} 
/* Set the fixed height of the footer here */ 
#push, #footer { 
    height: 60px; 
} 

#footer { 
    background-color: #f5f5f5; 
} 

Answer 1

Ich habe die Lösung für Ihr Problem. Ich habe es von JSFiddle nach Codepen verschoben, weil ich Codepen besser mag. Kein anderer Grund. http://cdpn.io/IJHxf

Dies ist im Wesentlichen, wo ich die Antwort bekommen habe, und sie erklären es viel besser als ich jemals könnte. http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

Wenn Sie diese Antwort implementieren, was ich gefunden height: auto !important; ist der Schuldige, warum es nicht sofort funktioniert. Kommentiere es in deiner #wrap-ID aus, um zu sehen, dass es seine volle Wirkung entfaltet. Der Code-Stift hat zusätzliche Änderungen, um wirklich zu sehen, was vor sich geht. Was Sie wirklich brauchen Ihre ursprüngliche Frage Arbeit zu machen ist

#wrap .container { 
    background-color: lightgreen; 
    min-height: 100%; 
    height: auto; /* this line takes care of "more than enough content problem" */ 
} 


html, body { 
    height: 100%; 
    background-color: #dedede; 
    padding: 0; 
    margin: 0; 
} 


#wrap { 
    min-height: 100%; 
    /* height: auto !important; */ 
    height: 100%; 
    margin: 0 auto -60px; 
} 

Eigentlich, was man tun könnte, und würde mehr Sinn machen, ist statt kommentieren die gesamte Zeile aus height: auto !important; Sie einfach die !imporant nehmen könnte ab. Zum Beispiel:

#wrap { 
    height: auto !important; 
    /* changed to */ 
    height: auto; 
} 

Ich habe einige Farben geändert, um deutlicher zu machen, was wirklich passiert. Sie werden das im Codepen sehen. Es gibt viele weitere Kommentare im Code-Stift, um zu sehen, was ich wirklich gemacht habe.

Außerdem fand ich, dass Ihre klebrige Fußzeile meiner Seite eine Bildlaufleiste wegen des Randes gab. Für mich wurde ich die Bildlaufleiste mit dem Code unten los.

margin: 0 auto -60px; 
/* changed to */ 
margin: 0 auto -80px;