Как опустить footer в самый низ CSS

Для того, чтобы прикрепить footer к нижней части страницы в CSS, можно использовать несколько подходов.

  1. Абсолютное позиционирование. Чтобы прикрепить footer к нижней части страницы, можно использовать абсолютное позиционирование. Для этого нужно задать position: absolute и bottom: 0 для footer:
.footer {
    position: absolute;
    bottom: 0;
}

Этот код прикрепляет footer к нижней части страницы.

  1. Flexbox. Еще один подход – использование flexbox. Для этого нужно задать height: 100% для элемента body и display: flex; flex-direction: column; для его дочернего элемента – контейнера с содержимым сайта. А затем нужно задать margin-top: auto для footer:
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1;
}
.footer {
  margin-top: auto;
}

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

  1. Grid. Третий подход – использование CSS Grid. Для этого нужно задать display: grid; grid-template-rows: 1fr auto; для элемента body и grid-row: 2 для footer:
body {
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row: 2;
}

Этот код прикрепляет footer к нижней части страницы, при этом первый ряд занимает все оставшееся пространство.

Важно учитывать, что финальный результат может зависеть от структуры и содержимого страницы.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

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

Наш специалист свяжется с вами в ближайшее время и уточнит детали