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

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

от clement.erdman , в категории: HTML/CSS , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от deshaun_cormier , 7 месяцев назад

@clement.erdman 

Для закрепления footer внизу страницы можно использовать следующий CSS-код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  padding: 20px;
}


Этот код устанавливает положение футера как fixed, что означает, что он будет прикреплен к нижней части окна браузера, а не к содержимому страницы. Свойство left: 0 устанавливает футер в крайнее левое положение, а bottom: 0 в крайнее нижнее положение. width: 100% устанавливает ширину футера на всю ширину окна браузера, background-color устанавливает цвет фона, color устанавливает цвет текста и padding задает отступы для контента внутри футера.


Если вы используете фреймворк, такой как Bootstrap, то можете использовать классы fixed-bottom или sticky-footer, которые уже задают нужные свойства для футера.