CSS Липкий нижний колонтитул с верхним краем

Question

Я нашел множество решений для липкого нижнего колонтитула здесь, в Stack Overflow, и он работает для меня. Тем не менее, мне нужно сохранить расстояние 60px между моим «content div» и моим «нижним колонтитулом». Во всех решениях, которые я нашел до сих пор, если я установил margin-top: 60px для моего «нижнего колонтитула», это не сработало.

Раствор я нашел:

<div id="container"> 
    <div id="body"> 
     <div id="teste"> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
</div> 

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 

#container { 
    min-height:100%; 
    position:relative; 
} 

#teste { 
    background: red; 
    height: 500px; 
} 

#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 

#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
    margin-top: 60px; <---- this didn't work 
} 

Answer 1

Решение было проще, чем я думал. Просто увеличьте значение padding-bottom моего #body div.

Answer 2

Set краю дна: 60px; на вашем «content-div». Ваш липкий нижний колонтитул имеет абсолютное позиционирование, которое удаляет его из потока страницы. Поля, которые вы установили на нем, не будут взаимодействовать с другими элементами. Установка поля в вашем содержимом div просто заставляет div оставаться 60px от нижней части страницы, которая занимает пространство, которое занимает ваш нижний колонтитул.