Главная

Как прибить футер в теме Bootstrap 5 на CMS Drupal 11

27-03-2025

Футер, который «прыгает» вверх при коротком контенте — частая головная боль при верстке сайтов на Drupal. Особенно, если используется тема на Bootstrap 5. В этой статье я расскажу, как сделать так, чтобы футер всегда был прижат к низу окна, независимо от длины контента страницы.

📌 Принцип работы sticky-футера.

Мы используем классическую схему с flexbox:

  • Оборачиваем весь сайт в .wrapper.d-flex.flex-column.min-vh-100
  • Контент растягивается с помощью flex-grow-1
  • Футер отталкивается вниз с помощью mt-auto

1. Шаблон html.html.twig

Файл html.html.twig отвечает за структуру <body>. Важно, чтобы вся страница была обернута в .wrapper:

<body{{ attributes.addClass(body_classes) }}>
  <div class="wrapper d-flex flex-column min-vh-100">
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
  </div>
</body>

⚠️ Важно: любые сторонние блоки, должны быть вне .wrapper.

2. Шаблон page.html.twig

Теперь нужно правильно построить внутреннюю структуру:

<div id="page-wrapper" class="d-flex flex-column min-vh-100">
  <div id="page" class="d-flex flex-column flex-grow-1">
    <header>...</header>
    <main role="main" class="flex-grow-1">
      <div class="container">
        {{ page.content }}
      </div>
    </main>
    <footer class="site-footer mt-auto">
      <div class="container text-center">
        {{ page.footer_first }}
      </div>
    </footer>
  </div>
</div>

💡 Главное — футер должен быть внутри того же flex-контейнера, что и <main>.

3. CSS: не забудьте про высоту

Добавьте в тему (например, в style.css или theme.css):

html, body {
  height: 100%;
}

Это обеспечит корректную работу min-vh-100.

🎯 Проверка

  • Футер всегда внизу, даже при пустой странице.
  • При большом контенте футер «уходит» вниз, как положено.
  • Поведение одинаковое на всех страницах.

🚀 Заключение

Sticky-футер в Drupal 11 с Bootstrap 5 — это не магия, а грамотная работа с flexbox. Главное — контролировать структуру шаблонов и вложенность блоков.

Теперь вы знаете, как «прибить» футер и держать его внизу без лишней боли 😊

Если статья помогла — делитесь ею с другими разработчиками Drupal!

Теги

Похожие статьи