Sticky footer с этим кодом?

Question

Я пробовал кучу липких нижних колонтитулов, но ни один из них не работает должным образом. Пошаговое объяснение того, как это сделать, было бы замечательно.

То, что я пытаюсь достичь, имеет нижний колонтитул (размер одной линии - 20 пикселей) STICK в нижней части страницы. Другими словами, если содержимого не так много, оно будет внизу страницы, а не на половину страницы (этого я уже достиг). Однако, если есть много контента, он не будет неудобно сидеть поверх контента, он будет внизу страницы под содержимым.

Вот соответствующий код, который я сделал:

CSS:

#footer { 
font: 12px Georgia, "Times New Roman", Times, serif; 
color:#FFF; 
background-color:#999; 
opacity:1; 
text-align:bottom; 
position:absolute; 
bottom:0; 
width:100%; 
height:20px; 
line-height:20px; 
} 

HTML:

<div id="footer" align="center" > Terms of Service &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbsp© 2014 (Blank) &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbspPrivacy Policy 
</div> 

Если просмотреть этот код, вы увидите, что он работает по назначению , он прилипает к дну. Это просто, если у вас слишком много контента, тогда код не сбрасывается, он остается внизу страницы, где вы открываете сайт.

Answer 1

Использовать положение: зафиксировано на нижнем колонтитуле и добавить нижнюю часть: 20px на тело, таким образом нижний колонтитул всегда будет внизу, а если содержимое тела слишком велико, наложение сделает его выше нижнего колонтитула.

#footer { 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    height: 20px; 
    text-align: center; //don't user align=center on the tag, it's deprecated 
} 
body { //or some other element 
    padding-bottom: 20px; 
}