Поддержание нижнего колонтитула в нижней части страницы?

Question

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

body { 
    margin: 0; 
    background-color: #ACFAB7; 
} 

# container { 
    margin: 0 auto; 
    padding: 40px; 
} 

#header { 
    z-index: 0; 
    height: 78px; 
    background-color: #2ecc71; 
} 

#footer { 
    z-index: 2; 
    height: 40px; 
    width: 100%; 
    padding: 0px; 
    position: relative; 
    background-color: #2ecc71; 
    /*display required to center text*/ 
    display: table; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

#image { 
    z-index: 1; 
    margin: 20px auto; 
    padding: 50px; 
} 

/*Centers text within the header*/ 
span { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 1

У вас много проблем. Данное решение предназначено для:

• Фиксация нижнего колонтитула в конце страницы.
• Центрирование содержимого (как по вертикали, так и по горизонтали).

затруднительных

• Избавьтесь от display: table.
• Избавиться width: 100%.
• Изменить relativefixed.

#footer { 
 
    z-index: 2; 
 
    line-height: 40px; 
 
    padding: 0px; 
 
    position: fixed; 
 
    background-color: #2ecc71; 
 
    text-align: center; 
 
    left: 0; right: 0; 
 
    bottom: 0; 
 
}

<div id="footer">Copyrights.</div>

Answer 2

Вы можете использовать position: fixed; bottom: 0;

#footer { 
 
    z-index: 2; 
 
    height: 40px; 
 
    width: 100%; 
 
    padding: 0px; 
 
    background-color: #2ecc71; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position:fixed; 
 
    bottom:0; 
 
    left: 0; 
 
}

<div> 
 
    <footer id="footer">Footer</footer> 
 
</div>

Answer 3

position: fixed; и bottom: 0; должны сделать трюк. Добавьте необходимую ширину и высоту.

.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: aquamarine; 
 
}

<div style="background-color: lightgrey;height: 800px"> 
 
    Page content 
 
</div> 
 
<div class="footer"> 
 
    this is the footer 
 
</div>