Как прибить блок к низу CSS

Существует несколько способов зафиксировать блок внизу страницы. Рассмотрим два из них.

1. Использование позиционирования и абсолютного позиционирования:

.container {
  position: relative;
  min-height: 100vh; /* минимальная высота блока равна высоте видимой области */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px; /* высота блока */
  background-color: #ccc;
}

В этом примере мы задаем высоту блока контейнера равной высоте видимой области страницы (min-height: 100vh), чтобы блок footer оказался внизу страницы. Затем мы задаем абсолютное позиционирование для элемента footer и устанавливаем его нижнюю границу внизу страницы (bottom: 0), ширину блока на 100% и высоту блока footer в 50px.

2. Использование Flexbox:

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* минимальная высота блока равна высоте видимой области */
}
.content {
  flex: 1; /* занимает всю доступную высоту */
}
.footer {
  height: 50px; /* высота блока */
  background-color: #ccc;
}

В этом примере мы используем свойство Flexbox для размещения контейнера и блока footer на странице. Мы задаем высоту блока контейнера равной высоте видимой области (min-height: 100vh), затем используем свойство Flexbox для размещения блоков в столбец (flex-direction: column). С помощью свойства «flex: 1» мы расширяем блок «content» до всей доступной высоты, а блок «footer» остается внизу.

Оба способа позволяют зафиксировать блок внизу страницы. Выбор определенного метода зависит от ваших потребностей и настроек на сайте.