Как прижать футер к низу страницы CSS?

Несколько способов прижать футер к низу страницы с помощью CSS:

• Использование Flexbox. sky.pro dev.to Для контейнера нужно установить свойства display: flex;, flex-direction: column; и min-height: 100vh;. sky.pro Затем для футера (footer) применить margin-top: auto;. sky.pro dev.to Это позволит футеру аккуратно расположиться в нижней части страницы. sky.pro
• Использование фиксированного позиционирования. sky.pro Можно использовать свойство position: fixed;. sky.pro Футер надёжно закрепится в нижней части экрана. sky.pro При этом нужно задать элементу body достаточный отступ, чтобы содержимое страницы не перекрывало футер. sky.pro
• Использование CSS grid. webtips.dev Этот способ расширяет основной элемент и прижимает футер к низу страницы. webtips.dev Высота 100vh гарантирует, что элемент займёт 100% высоты видимого окна просмотра. webtips.dev
• Использование абсолютного позиционирования. impuls-web.ru Нужно задать для блока с контентом и его родительских блоков минимальную высоту 100%, а затем для футера сайта задать отрицательный отступ сверху, который равен высоте футера. impuls-web.ru

Пользователь

Время добавления