1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

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

Тема в разделе "Web Coding", создана пользователем sche, 9 мар 2018.

Модераторы: latteo
  1. sche

    sche Постоялец

    Регистр.:
    16 ноя 2017
    Сообщения:
    126
    Симпатии:
    44
    Добрый день!
    Есть два сайта. На одном 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> - всю. Какой из них использовать в качестве обёртывающего страницу элемента?

    Заранее низкий поклон всем неравнодушным.
     
  2. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    161
    Симпатии:
    109
    1. Чтобы футер прилипал при прокрутке, css недостаточно, нужен js
    Проще всего использовать какой-нибудь плагин, например этот
    http://leafo.net/sticky-kit/

    2. Возьми дефолтные образцы страниц с версткой из foundation или bootstrap.
    Изучи на их примере как работают гриды на основе флоат и флексбокс
    https://foundation.zurb.com/sites/docs/xy-grid.html

    Кстати там есть встроенная липучка
    https://foundation.zurb.com/sites/docs/sticky.html

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

    3. Изучи SASS и BEM
    https://ru.bem.info/methodology/quick-start/
     
    sche нравится это.
  3. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    161
    Симпатии:
    109
    И собственно о чем просил - пример верстки с флексбоксом, с футером, который липнет, если высота контента меньше высоты экрана,
    и ведет себя как обычный футер, если контент вылазит за экран

    https://jsfiddle.net/tvvjevus/25/
     
    Последнее редактирование: 10 мар 2018
    alider и sche нравится это.
  4. sche

    sche Постоялец

    Регистр.:
    16 ноя 2017
    Сообщения:
    126
    Симпатии:
    44
    Спасибо за подборку информации, обязательно изучу! Но до этого хотелось бы уточнить несколько вопросов.
    Но ведь
    а) На первом сайте работает без js;
    б) Ты во втором посте как раз даёшь линк на CSS без JS, или я не так понимаю?
    Также смотрю на код и вижу, что там та же ситуация, которая мне изначально сунула палку в колесо: здесь взаимодействие с bodywrapper и inner bodywrapper, а у меня вместо первого <main>, к которому я не понимаю, как "обратиться", а второго вовсе нет.
     
  5. sche

    sche Постоялец

    Регистр.:
    16 ноя 2017
    Сообщения:
    126
    Симпатии:
    44
    Всё! Вопрос решился. Неученье - тьма, скажу я вам. А когда человека другой профессии заставляют изучать программирование - это, как минимум, потёмки.

    А не хватало мне следующих познаний:
    Селекторы из 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;
    }
     
  6. elkoyot

    elkoyot Писатель

    Регистр.:
    25 мар 2018
    Сообщения:
    13
    Симпатии:
    4
    только тут в коде ошибка, вы принудительно указали высоту main в размер экрана. а что будет с этим main, если там будет контент больше, чем высота экрана?
    alex_me дал дельный совет, код работает
    хотя сам использую js для вычислений высоты контента и назначения margin
    теперь попробую переделать на чистый css
     
  7. sche

    sche Постоялец

    Регистр.:
    16 ноя 2017
    Сообщения:
    126
    Симпатии:
    44
    У меня работает как надо, попробуйте сами. Я это не придумал, а нашёл в сети. Как можно догадаться по моим более ранним сообщениям, придумывать что-то самому мне пока рановато :)
     
  8. xLuckyx

    xLuckyx Создатель

    Регистр.:
    13 ноя 2008
    Сообщения:
    32
    Симпатии:
    10
    sche, надо использовать min-height для элемента с основным содержимым, тогда у тебя меньше этой высоты блок не сможет быть, даже если контента очень мало. В примере, даже если ты сделаешь для main и aside высоту 200px, футер будет на своем месте. А если конента будет больше, то футер смещается вниз.
     
  9. sche

    sche Постоялец

    Регистр.:
    16 ноя 2017
    Сообщения:
    126
    Симпатии:
    44
    Если я правильно понимаю, в таком варианте надо задавать очень много конкретных размеров элементов. А у меня резиновый шаблон, который проверяю на смартфоне, ноутбуке с разрешением 1366х768 и домашнем мониторе с разрешением 2К. Где-то да обязательно вылезают косяки с таким подходом.
     
  10. xLuckyx

    xLuckyx Создатель

    Регистр.:
    13 ноя 2008
    Сообщения:
    32
    Симпатии:
    10
    Единственный размер который нужно будет задать в стилях для тега в котором у вас находится основной контент сайта - min-height. Его можно указать в px, em, rem, %. В примере, что я дал выше, размеры указаны для наглядности, не обязательно все делать также!
     
    sche нравится это.