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

Для того чтобы прижать footer к низу страницы, можно использовать несколько способов

1. Использование CSS свойств: — Установите высоту для основного контейнера страницы (`<body>`) равную100%: `body { height:100%; }` — Задайте минимальную высоту для основного контейнера страницы во весь экран (`min-height:100vh;`). — Установите свойство `display: flex;` для основного контейнера страницы, чтобы применить Flexbox

— Используйте свойство `flex-direction: column;`, чтобы установить вертикальную ориентацию

— Установите `margin-top: auto;` для footer’а, чтобы он прижался к низу страницы

Пример CSS кода:«`css

body { height:100%; min-height:100vh; display: flex; flex-direction: column;}footer { margin-top: auto;}«`2. Использование абсолютного позиционирования: — Задайте основному контейнеру страницы (`<body>`) высоту100%: `body { height:100%; }` — Установите `position: relative;` для основного контейнера страницы

— Для footer’а установите `position: absolute;`, `bottom:0;` и `width:100%;`.Пример CSS кода:«`css

body { height:100%; position: relative;}footer { position: absolute; bottom:0; width:100%;}«`Оба этих метода позволяют прижать footer к низу страницы, даже если контент на странице невелик. Вы можете выбрать любой из них в зависимости от ваших предпочтений и требований к верстке.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Рабочая область
Табы на css
Текст 1-го таба
Текст 2-го таба
Текст 3-го таба
Кнопка "Заказать звонок"
Заказать звонок
Выпадающий список
Успешные
  • Успешные
  • Отклонённые
  • Закрытые
  • На рассмотрении
Форма с валидацией полей через js
Анимация на css
Блок с анимацией


Для того, что бы на блок навесить эффект - необходимо данному блоку прописать два класса:
1-ый: animated
2-ой: 'название эффекта'
(При написании классов важно придерживаться регистра)

Например:
<div class="animated wobble">Блок с анимацией</div>