Я создал очень простую библиотеку https://github.com/ravinderpayal/FooterJS
Это очень просто в использовании. После включения библиотеки просто назовите эту строку кода.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Нижние колонтитулы можно динамически изменять, вызывая указанную выше функцию с другим параметром / идентификатором.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Примечание: - Вы не должны изменять или добавлять CSS. Библиотека является динамической, что означает, что даже если размер экрана после загрузки страницы будет изменен, будет сброшено положение нижнего колонтитула. Я создал эту библиотеку, потому что CSS решает проблему на некоторое время, но когда размер дисплея значительно меняется, с рабочего стола на планшет или наоборот, они либо перекрывают контент, либо перестают оставаться липкими.
Другое решение - CSS Media Queries, но вам нужно вручную писать разные стили CSS для экранов разного размера, в то время как эта библиотека выполняет свою работу автоматически и поддерживается всеми основными браузерами, поддерживающими JavaScript.
Изменить
CSS решение:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
Теперь, если высота показа больше, чем длина вашего контента, мы сделаем нижний колонтитул зафиксированным внизу, а если нет, он автоматически появится в самом конце экрана, так как вам нужно прокрутить, чтобы просмотреть это.
И это кажется лучшим решением, чем JavaScript / библиотека.