Фиксация footer div внизу страницы: как запретить его скролл

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы нижний колонтитул оставался внизу экрана, воспользуйтесь CSS Flexbox. Настройте основной контейнер (например, body) таким образом, чтобы он занимал всю доступную высоту вьюпорта, используя display: flex; flex-direction: column; min-height: 100vh;. А нижнему колонтитулу добавьте margin-top: auto;, что позволит его "прижать" к нижнему краю экрана.

CSS

Скопировать код

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

footer {
  margin-top: auto;
}

Разместите основное содержимое внутри тега main, а нижний колонтитул поместите после него:

HTML

Скопировать код

<body>
  <main> ... </main>
  <footer> ... </footer>
</body>

Установите height: 100%; для html и body, чтобы гарантировать полное заполнение экрана.

CSS

Скопировать код

html, body {
  height: 100%;
}

Благодаря такому подходу нижний колонтитул будет надежно прикреплен к нижней части экрана независимо от типа устройства.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Подробное объяснение: Работа со контентом разной длины

Контент, превышающий высоту вьюпорта

Рассмотренный метод подходит для случаев, когда содержимое страницы не занимает всю видимую область, тем самым нижний колонтитул остается у нижнего края экрана. Если же контент длиннее, нижний колонтитул продолжит "следовать за" контентом, сохраняя корректное положение при прокрутке.

Обеспечение единообразного отображения в различных браузерах

Для унификации отображения в разных браузерах рекомендуется использовать CSS reset, например normalize.css.

HTML

Скопировать код

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

Фиксация нижних колонтитулов для постоянного отображения

Вы можете зафиксировать нижний колонтитул так, чтобы он был всегда виден, применив position: fixed; с bottom: 0; и width: 100%;. Таким образом, footer будет занимать всю ширину экрана и не исчезнет из поля зрения.

CSS

Скопировать код

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

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

CSS

Скопировать код

body {
  padding-bottom: 60px;
}

Гибкая высота для колонтитулов с динамическим контентом

Если в нижний колонтитул включен переменный контент, задайте height: auto;, чтобы исключить потерю или обрезание информации.

Визуализация

Смотрите на ваш HTML-документ как на произведение искусства, где каждый элемент находится на своем месте:

Markdown

Скопировать код

| Элемент сайта    | Аналогия          |
| --------------- |------------------|
| Содержание      | Главная композиция |
| Нижний колонтитул | Прочная рама       |

Нижний колонтитул, как прочная рама, подчеркивает границы вашего содержимого:

HTML

Скопировать код

<body style="position: relative; min-height: 100%;">
  <footer style="position: absolute; bottom: 0; width: 100%;">
    <!-- Ваш нижний колонтитул займет свое место здесь -->
  </footer>
</body>

Визуальная аналогия:

Markdown

Скопировать код

🖼️ [(Основное) Главная композиция – ваш уникальный контент]
🧵 [-------------------------------]
👣 [Footer – Прочная рама{🖌️}]

Как рама завершает картину, так и Footer внизу страницы обрамляет ваше содержимое, придавая ему законченность.

Размещение нижнего колонтитула — Продвинутые методы

Использование Grid Layout

Если задача по размещению нижнего колонтитула требует более сложного подхода, используйте систему Grid Layout. Она придаст элегантность пользовательскому интерфейсу, подобно эффекту от стильной банданы.

"Прилипающие" нижние колонтитулы с использованием свойства sticky

Примените position: sticky; и bottom: 0;, чтобы нижний колонтитул стал "липким". Он будет "прилипать" к нижнему краю родительского блока, пока не достигнет предела экрана, после чего начнет прокручиваться вместе со страницей.

Тщательное управление отступами для предотвращения наложений

Необходимо внимательно контролировать отступы, используя margin-top и height, чтобы нижний колонтитул не перекрывал содержимое страницы. Будьте осторожны с отрицательными значениями отступов, чтобы избежать "игры в прятки" между колонтитулом и содержимым.

Полезные материалы

Полное руководство по Flexbox | CSS-Tricks — Исчерпывающая информация об использовании Flexbox в CSS.
Основные концепции flexbox – CSS: Каскадные таблицы стилей | MDN — Обстоятельное и понятное руководство от Mozilla по работе с Flexbox.
css — Как прикрепить footer к нижней границе страницы с twitter bootstrap — Stack Overflow — Надежные способы зафиксировать footer внизу страницы.
Sticky Footer: пять методов | CSS-Tricks — Пять проверенных способов сделать footer "липким".
Что происходит, когда вы создаете контейнер на Flexbox? — Smashing Magazine — Все тонкости работы с контейнерами Flexbox.
Исследование footer — A List Apart — Методы внедрения footer с использованием CSS Grid, сопоставимые с находкой Святого Грааля в мире верстки.

Свежие материалы

Работа с полями структур в C

30 августа 2024

Возврат значений из функций в C

30 августа 2024

Управляющие конструкции в C

30 августа 2024