Чтобы сделать футер внизу страницы с помощью CSS, можно использовать некоторые техники разметки и позиционирования элементов.
Самый простой способ сделать футер внизу страницы — это задать абсолютное позиционирование и фиксированную высоту для самого футера.
Например, в HTML коде перед закрывающим тегом </body> добавляем элемент футера с классом «footer»:
<footer class="footer">...</footer>
А в CSS стилях задаем следующее:
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
В этом примере свойство position: absolute задает футеру абсолютное позиционирование внутри контейнера (обычно это body). Для определения позиции относительно нижнего края используется свойство bottom: 0. Ширина элемента задана в 100% от ширины контейнера (обычно это тоже body) и высота — 50 пикселей.
Но при таком подходе есть риск, что футер может перекрывать основное содержимое страницы, если высота футера больше, чем доступный свободный простор на странице.
Более безопасный способ решения этой задачи — использование «flexbox» — гибкой модели распределения пространства в контейнере.
Например, добавляем следующий CSS код:
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex: 1;
}
.footer {
flex-shrink: 0;
}
В этом примере свойство display: flex равномерно распределяет доступное пространство по вертикали внутри body. Элемент main заполняет все доступное пространство внутри body и дает возможность flexbox’у автоматически контролировать распределение свободного места на странице. Свойство flex-shrink: 0 говорит, что элемент футера не должен сжиматься, если на странице мало контента и недостаточно свободного пространства (в этом случае футер остается прижатым к нижней границе страницы, но основное содержимое страницы не перекрывается).
Также стоит убедиться, что у body и html элементов задано 100% высоты:
html, body {
height: 100%;
}
Такие CSS стили позволяют создать «прилипающий» футер, который будет всегда оставаться внизу страницы и не перекрывать основное содержимое страницы.