Stick-Footer unten auf der Seite in Abhängigkeit von Inhalten

Question

Ich habe eine Fußzeile hier http://codepen.io/anon/pen/EKmXMR

und ich würde es am Ende der Seite zu bleiben, wie wenn der Inhalt nicht genug ist, und wenn der Gehalt mehr als 100% übernehmen Höhe des Bildschirms, ich möchte es am Ende des Inhalts sein. Die Sache ist, dass ich viele "Sticky Footer" Lösung mit CSS3 wie absolute Position hier http://cbracco.me/cs...-footer-effect/ versuchte, aber es funktioniert nicht für mich.

Wissen Sie, was los ist?

.footer{ 
width:100%; 
height: 50px; 
text-align:center; 
/*position:absolute;*/ 
color: white; 
z-index: 2; 
/*bottom: 0; 
right:0; 
left:0;*/ 
background-color:black; 
line-height:50px; 
} 
.footer a { 
color: inherit; 
text-decoration: none; 
} 

Answer 1

Eine Lösung I fand eine Polsterung an den Wrapper (Seite) hinzuzufügen:

.wrapper{ 
    min-height: 100%; 
    padding: 0 0 50px; 
    float: left; 
    position: relative; 
    box-sizing: border-box; 
} 

Die Polsterung ist 50px Boden für mein Fall. Danach ist die Höhe der Fußzeile gleich der Polsterung.

.footer{ 
    width: 100%; 
    height: 50px; 
    text-align: center; 
    position: absolute; 
    color: white; 
    bottom: 0; 
    left: 0; 
    background-color: black; 
    line-height: 50px; 
} 

Sehen Sie ein Beispiel auf meinem eigenen website

Danke

Answer 2

Vielleicht möchten Sie finden diese pen nützlich

.footer { 
position: fixed; 
width:100%; 
height:50px; 
bottom: 0px; 
}