Footer an der Unterseite platzieren

Question

Ich versuche, meine Fußzeile am unteren Rand der Seite zu platzieren, nicht klebrig. Ich setze den Grund auf 0px, aber wenn die Seite zu lang ist, bleibt meine Fußzeile oben und nicht unten auf der Seite. Auch meine Fußzeile bleibt bei meinem Logo, anstatt unten auf der Seite zu sein. Was muss ich tun, um dieses Problem zu beheben?

Heres ein Beispiel CSS

.logo { 
    display: block; 
    z-index: 20; 
    height: 200px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 100px; 
} 

footer { 
    width: 100%; 
    background: rgba(0,0,0,0.6); 
    bottom: 0; 
} 

HTML

<footer class="footer"> 
     <div class="container text-center"> 
      <h4>Follow Us On Social Media!</h4> 
      <a href="#"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a> 
      <a href="#"><i class="fa fa-twitter-square fa-3x"></i></a> 
      <a href="#"><i class="fa fa-google-plus-square fa-3x"></i></a> 
      <a href="#"><i class="fa fa-instagram fa-3x" aria-hidden="true"></i></a> 
     </div><!--End container--> 
    </footer><!--End footer 2--> 

Schätzen Sie Ihre Hilfe!

Answer 1

Fügen Sie die relative Position der Position zum html-Tag und die absolute Position zur Fußzeile hinzu, wie unten gezeigt, und die Fußzeile befindet sich immer am unteren Rand des Seiteninhalts.

html { 
 
    min-height:100%; 
 
    position:relative; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    z-index: 20; 
 
    height: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 100px; 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    background: rgba(0,0,0,0.6); 
 
    position:absolute; 
 
    bottom: 0; 
 
}

Check this Jsfiddle for reference