フッターを下に置く

Question

私はページの一番下にフッターを貼り付けようとしています。ボトムを0pxに設定しましたが、ページが長すぎる場合は、ページの下部に表示されるのではなく、上部に表示されます。また、私のフッタは、ページの下部にあるのではなく、ロゴをつけています。この問題を解決するにはどうすればよいですか？

相続人一例 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--> 

あなたの助けに感謝！

Answer 1

htmlタグに位置相対プロパティを追加し、下に示すように絶対をフッターに配置すると、フッターは常にページコンテンツの一番下になります。

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