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

Есть несколько способов прикрепить footer к нижней части страницы при помощи CSS, вот один из них:

Создайте footer и добавьте в него необходимый контент. Затем используйте следующий CSS-код:

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

Этот CSS-код добавляет footer с фиксированной позицией, который всегда будет располагаться внизу страницы. Свойство left:0 и width: 100% говорят браузеру, чтобы footer занимал всю ширину страницы.

Это работает, но может быть проблема с перекрытием содержимого страницы или footer-а. Чтобы избежать этой проблемы, вы можете задать отступ (margin) нижней части страницы, чтобы создать пространство под footer-ом.

Например, добавьте следующий код для тега body в вашем CSS-файле:

body {
  margin-bottom: 100px; /* высота футера 100px, замените своей */
}

Измените 100px на высоту вашего footer-а. Таким образом, вы создаете отступ для содержимого страницы, чтобы footer не перекрывал его. Если вы хотите, чтобы содержимое страницы было отображено и под footer-ом, то можно использовать padding вместо margin.

Вот один из способов, как можно прикрепить footer к низу страницы.

реклама

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

реклама

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

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

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

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

Закажите услугу Как прикрепить footer к низу страницы CSS

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