Нужна помощь: "липкий" футер в CSS с использованием "flex" (на Prestashop)

sche

Гуру форума
Регистрация
16 Ноя 2017
Сообщения
162
Реакции
68
Добрый день!
Есть два сайта. На одном Joomla точена, в которой я сделал (ну, как я - я, как говорится, мал и глуп, просто нашёл готовый код, я его лишь могу понять и знаю, куда его вставить) т.н. "липкий" футер. Это не тот, который постоянно внизу окна браузера, куда ни мотай, а который внизу экрана только когда на странице недостаточно контента, чтоб его туда прижать, а в остальное время он себя ведёт так, как должен вести себя типичный футер.
А на сайте втором у меня Prestashop, куда я пытаюсь по аналогии прикрутить такой же, но не могу разобраться в HTML. Перебрал кучу вариантов, ни на один реакции нет.

Вот структура и CSS первого сайта:

HTML:
<body class="site com-sppagebuilder view-page no-layout no-task itemid-101 ru-ru ltr  layout-fluid off-canvas-menu-init">
  <div class="body-wrapper">
    <div class="body-innerwrapper">
      <section id="sp-top-bar">...</section>
      <header id="sp-header">...</header>
      <section id="sp-page-title">...</section>
      <section id="sp-main-body">...</section>
      <footer id="sp-footer">...</footer>
    </div>
    <...>
  </div>
  <...>
</body>

#sp-top-bar,
#sp-header,
#sp-page-title,
#sp-footer {
flex-shrink: 0;
}
.body-innerwrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
#sp-main-body {
flex: 1 0 auto;
}

А вот структура второго сайта. На первый взгляд всё даже проще, чем в первом варианте, т.к. меньше элементов:

HTML:
<body id="index" class="lang-ru country-ru currency-rub layout-full-width page-index tax-display-disabled body-desktop-header-style-w-1">
  <main>
    <header id="header" class="desktop-header-style-w-1">...</header>
    <section id="wrapper">...</section>
    <footer id="footer">...</footer>
  </main>
  <...>
  <button id="back-to-top" class="">...</button> <!-- На всякий случай пишу элементы с запасом, вдруг это важно -->
</body>

Однако же ничего не хочет работать. Лично у меня две основные непонятки:
1) Как применять стиль к элементу <main> (и надо ли)?
2) <body>, который стоит выше в иерархии, охватывает примерно половину страницы (для меня это 2031.2х784.8), а <main> - всю. Какой из них использовать в качестве обёртывающего страницу элемента?

Заранее низкий поклон всем неравнодушным.
 
1. Чтобы футер прилипал при прокрутке, css недостаточно, нужен js
Проще всего использовать какой-нибудь плагин, например этот
Для просмотра ссылки Войди или Зарегистрируйся

2. Возьми дефолтные образцы страниц с версткой из foundation или bootstrap.
Изучи на их примере как работают гриды на основе флоат и флексбокс
Для просмотра ссылки Войди или Зарегистрируйся

Кстати там есть встроенная липучка
Для просмотра ссылки Войди или Зарегистрируйся

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

3. Изучи SASS и BEM
Для просмотра ссылки Войди или Зарегистрируйся
 
  • Нравится
Реакции: sche
И собственно о чем просил - пример верстки с флексбоксом, с футером, который липнет, если высота контента меньше высоты экрана,
и ведет себя как обычный футер, если контент вылазит за экран

Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
Спасибо за подборку информации, обязательно изучу! Но до этого хотелось бы уточнить несколько вопросов.
1. Чтобы футер прилипал при прокрутке, css недостаточно, нужен js
Но ведь
а) На первом сайте работает без js;
б) Ты во втором посте как раз даёшь линк на CSS без JS, или я не так понимаю?
Также смотрю на код и вижу, что там та же ситуация, которая мне изначально сунула палку в колесо: здесь взаимодействие с bodywrapper и inner bodywrapper, а у меня вместо первого <main>, к которому я не понимаю, как "обратиться", а второго вовсе нет.
 
Всё! Вопрос решился. Неученье - тьма, скажу я вам. А когда человека другой профессии заставляют изучать программирование - это, как минимум, потёмки.

А не хватало мне следующих познаний:
Селекторы из CSS1
  • обращение к элементу по тегу (BODY, A, TABLE и т.д.);
  • по ID (#main);
  • по классу (.header-image);
<main> - это тег, и обращаются к нему без точки или шарпа. На всякий случай для будущих поколений оставлю код, который получился и работает даже в IE (в 11 версии уже, правда).

#header,
#footer {
flex-shrink: 0;
}

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

#wrapper {
flex: 1 0 auto;
}
 
Всё! Вопрос решился. Неученье - тьма, скажу я вам. А когда человека другой профессии заставляют изучать программирование - это, как минимум, потёмки.

А не хватало мне следующих познаний:
Селекторы из CSS1
  • обращение к элементу по тегу (BODY, A, TABLE и т.д.);
  • по ID (#main);
  • по классу (.header-image);
<main> - это тег, и обращаются к нему без точки или шарпа. На всякий случай для будущих поколений оставлю код, который получился и работает даже в IE (в 11 версии уже, правда).

#header,
#footer {
flex-shrink: 0;
}

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

#wrapper {
flex: 1 0 auto;
}
только тут в коде ошибка, вы принудительно указали высоту main в размер экрана. а что будет с этим main, если там будет контент больше, чем высота экрана?
alex_me дал дельный совет, код работает
хотя сам использую js для вычислений высоты контента и назначения margin
теперь попробую переделать на чистый css
 
только тут в коде ошибка, вы принудительно указали высоту main в размер экрана. а что будет с этим main, если там будет контент больше, чем высота экрана?
У меня работает как надо, попробуйте сами. Я это не придумал, а нашёл в сети. Как можно догадаться по моим более ранним сообщениям, придумывать что-то самому мне пока рановато :)
 
sche, надо использовать min-height для элемента с основным содержимым, тогда у тебя меньше этой высоты блок не сможет быть, даже если контента очень мало. В примере, даже если ты сделаешь для main и aside высоту 200px, футер будет на своем месте. А если конента будет больше, то футер смещается вниз.
 
sche, надо использовать min-height для элемента с основным содержимым, тогда у тебя меньше этой высоты блок не сможет быть, даже если контента очень мало. В примере, даже если ты сделаешь для main и aside высоту 200px, футер будет на своем месте. А если конента будет больше, то футер смещается вниз.
Если я правильно понимаю, в таком варианте надо задавать очень много конкретных размеров элементов. А у меня резиновый шаблон, который проверяю на смартфоне, ноутбуке с разрешением 1366х768 и домашнем мониторе с разрешением 2К. Где-то да обязательно вылезают косяки с таким подходом.
 
Если я правильно понимаю, в таком варианте надо задавать очень много конкретных размеров элементов
Единственный размер который нужно будет задать в стилях для тега в котором у вас находится основной контент сайта - min-height. Его можно указать в px, em, rem, %. В примере, что я дал выше, размеры указаны для наглядности, не обязательно все делать также!
 
  • Нравится
Реакции: sche
Назад
Сверху