Как создать отзывчивый нижний колонтитул с использованием CSS

] Поддержание нижнего колонтитула в дне страницы является общим требованием веб -дизайна. Тем не менее, некоторые пользователи сталкиваются с трудностями, используя «абсолютное» свойство позиционирования. Эта статья проведет вас через правильную реализацию CSS для достижения липкого эффекта нижнего колонтитула без нарушения вашего макета.

выпуск фон

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

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

предложенное решение

для решения проблемы без использования плагинов или дополнительных элементов HTML, выполните следующие действия:

1. добавить следующие правила CSS в свой стиль:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Ensure that the height specified in "body {margin}" matches the actual height of the footer element (e.g., 100px).

]