Установка нижнего колонтитула внизу

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