Липкий футер внизу: решение на чистом CSS

Внести вклад UX
1

Привет, энтузиасты Discourse!

Хочу поделиться с вами решением для прижатого к низу подвала (sticky footer) без использования JavaScript (альтернатива этому запросу), при условии, что вы знаете высоту вашего подвала. Я добавил к своей высоте ещё 100 пикселей, чтобы создать пространство между контентом и подвалом.
Если у вас более высокий подвал с несколькими колонками, задайте другую фиксированную высоту на вкладке для мобильных устройств.

Шаг 1: Вставьте этот код во вкладку общего CSS:

body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* равно высоте подвала — измените по необходимости, и на вкладке общего CSS, и на вкладке для мобильных устройств */
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background);  /* опционально */
  color: var(--primary-medium); /* опционально */
  text-align: center; /* опционально */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

Шаг 2: Перейдите на вкладку </body> и вставьте туда HTML-код вашего подвала.

Пример:

<div id="sticky-footer">
  <div class="wrap">
      <!-- ваш контент подвала здесь -->
  </div>
</div>

Всё готово :slightly_smiling_face:. Теперь ваш подвал будет прижат к низу страницы даже на страницах с коротким контентом.

Вот как выглядит наш подвал на странице с коротким контентом:

image
image1150×1082 28.9 KB

В противном случае он располагался бы посередине экрана, как показано ниже:

image
image1316×1222 33.5 KB

3 лайка
2

Зачем использовать это вместо стандартного компонента темы Discourse?

1 лайк
3

Скажи мне, Джефф :slight_smile: ..нужно ли устанавливать компоненты для каждого дополнительного фрагмента HTML и CSS-кода? Это не урок «как создать подвал», а скорее быстрое альтернативное решение, чтобы зафиксировать подвал внизу страницы для тех, кто хочет создать свой собственный подвал.

4

Хм, я думаю, что мы хотим, чтобы люди использовали компоненты тем, когда это возможно, так как они являются «официальными» с нашей стороны и, следовательно, получают полную поддержку, автоматически обновляются и так далее. Что думают @awesomerobot, @Johani и @jordan.vidrine?

2 лайка
7

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

Раньше я делал что-то подобное… процесс похож на решение OP. Вы устанавливаете высоту #main-outlet равной 100% высоты окна просмотра (100vh) минус высота подвала и заголовка. Таким образом, на коротких страницах ваш подвал будет располагаться ровно внизу.

#main-outlet {
  box-sizing: border-box; // включает отступы в расчет высоты
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  Контент моего подвала
</script>

<script type="text/discourse-plugin" version="0.8">
    api.decoratePluginOutlet(
      "below-footer",
      (elem, args) => {
          let headerHeight = document.querySelector(".d-header").offsetHeight;
          let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
          let mainOffset = headerHeight + footerHeight;
          
          document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
      }
   );
</script>

Screen Shot 2021-02-22 at 6.19.39 PM
Screen Shot 2021-02-22 at 6.19.39 PM878×787 118 KB

Это встречается довольно часто, поэтому, вероятно, стоит автоматически реализовать что-то подобное в ядре, если в footer.html или в одном из двух слотов для плагинов подвала есть контент.

4 лайка
8

@cosdesign, не могли бы вы подсказать, где находится эта вкладка CSS, если вам не сложно, друг? :slight_smile:

9

Для вашей темы по умолчанию вы найдете её, нажав кнопку «Изменить CSS/HTML»:!

Untitled
Untitled1482×751 43.1 KB

Однако лучше создать её как компонент темы (нажмите кнопку «Установить» и выберите «Создать новый» внутри этого меню).

Больше информации можно найти по адресу: Developing Discourse Themes & Theme Components :+1:

2 лайка
10

Отлично :slight_smile:

1 лайк