Как сохранить нижний колонтитул в нижней части страницы

Question

Я читал много и все еще не позиционировал свой нижний колонтитул. Я пытаюсь разместить нижний колонтитул, чтобы оставаться внизу страницы и быть видимым только тогда, когда я прокручиваю нижнюю часть.

Я добавил на следующие классы на страницу:

<div class="wrap"> 

<!-- Holds all the page content inside --> 

<div class="spacer"></div> 
</div> 

<div class="footer"> 
..... 
</div> 

Я добавил на следующие CSS классов:

.wrap { 
min-height: 100%; 
margin-bottom: -100px; 
    padding:5%; 
} 

/* Set the fixed height of the footer here */ 
.footer { 
    position: relative; 
    background-color: #222; 
    z-index: 1; 
} 

.spacer, #footer { 
    height: 100px; 
} 

Что я делаю неправильно и предотвращение колонтитула всегда оставаться внизу?

Answer 1

Добавьте к этому классу колонтитула

position: relative; 
bottom: 0; 
margin: 20px 0 0 0; 
width: 100%; 

Это будет держать колонтитула в нижней

<div class="footer"> 
Your content 
</div> 

Answer 2

Разместите нижние колонтитулы как absolute и добавьте bottom: 0 в мой нижний класс.

.footer { 
    ... 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

Answer 3

Более элегантное решение было бы, как этот

html, body{ 
 
margin: 0;padding:0; 
 
} 
 
.fake-body{ 
 
    height: 200px; 
 
    overflow: auto; 
 
} 
 
.wrap { 
 
position:relative; 
 
} 
 

 
/* Set the fixed height of the footer here */ 
 
.footer { 
 
    position: absolute; 
 
    background-color: #222; 
 
    z-index: 1; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    color:white; 
 
} 
 

 
.spacer, #footer { 
 
    height: 300px; 
 
}

<div class="fake-body"> 
 
<div class="wrap"> 
 

 
<div class="spacer">spacer</div> 
 

 
<div class="footer">footer</div> 
 
    
 
</div> 
 
</div>