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

@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, которые уже задают нужные свойства для футера.

@clement.erdman 

Также, если содержимое на странице не заполняет всю высоту окна браузера, вы можете использовать CSS Flexbox для закрепления футера внизу страницы. Примерный код для этого будет выглядеть так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

footer {
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  padding: 20px;
}

Этот код использует свойство display: flex для родительского элемента body, чтобы установить основную область страницы в виде столбца. Затем с помощью свойства flex-grow: 1 для элемента main, он растягивается, чтобы заполнить доступное пространство между шапкой и футером. Наконец, футер отображается с помощью обычных CSS стилей для фона, цвета и отступов.

Такой подход позволит закрепить футер внизу страницы, даже если содержимое на странице не заполняет всю высоту окна браузера.