Как прекрипить футер к самому нижу?

Чтобы закрепить футер внизу страницы, есть несколько способов. Вот некоторые из них:

1. Использование стилей CSS:

   body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     margin: 0;
     padding: 0;
   }
   
   .content {
     flex: 1;
   }
   
   .footer {
     flex-shrink: 0;
   }

В этом примере мы используем гибкую модель блоков (flexbox) для создания структуры страницы. Родительский элемент body установлен как гибкая колонка с минимальной высотой 100vh (видимая область), чтобы гарантировать, что контейнеры в body займут всю доступную область. Элемент .content имеет flex: 1 для заполнения оставшегося пространства, и элемент .footer имеет flex-shrink: 0, чтобы он не сжимался и всегда оставался внизу страницы.

2. Использование позиционирования CSS:

   html, body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   
   .wrapper {
     min-height: 100%;
     position: relative;
   }
   
   .content {
     padding-bottom: 50px; /* Высота футера */
   }
   
   .footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 50px; /* Высота футера */
   }

Здесь мы устанавливаем html и body с высотой 100% и отменяем отступы, чтобы убедиться, что содержимое займет всю доступную область. Элемент .wrapper имеет min-height: 100% для того, чтобы контейнер был высоким как минимум на 100% видимой области. Затем мы устанавливаем отступ padding-bottom для .content, чтобы создать пространство для футера. Контейнер .footer позиционируется абсолютно внизу страницы, используя position: absolute; bottom: 0, ширина задается 100% от родительского блока, и также устанавливается его высота.

3. Использование свойства CSS Grid:

   body {
     display: grid;
     grid-template-rows: 1fr auto;
     min-height: 100vh;
     margin: 0;
     padding: 0;
   }
   
   .content {
     /* Стили для контента */
   }
   
   .footer {
     /* Стили для футера */
   }

В данном случае мы используем CSS Grid для размещения контейнеров на странице. Родительский элемент body установлен как сетка с одной строкой, которая использует 1fr (одна "гибкая" единица) для занимания всей доступной области, и auto для футера, чтобы он занимал только свой собственный размер. Это гарантирует, что контент будет занимать оставшуюся часть страницы, а футер будет прикреплен к нижней границе родительского блока.

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