Подготовка полигона для испытаний

Набросаем простенькую страничку, на которой будем экспериментировать:

И зададим для нее такие же простенькие стили:

Пока что это простое украшательство, мы добавили обертке штриховую рамку и раскрасили основные блоки — header, main и footer, чтобы проще их различать. Текущий результат не очень впечатляет, правда?)


Футер висит где-то высоко над землей, а мы очень хотим его к этой земле приклеить.

Постановка задачи

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

Position:absolute

Предупреждение: данный способ годится только для футеров фиксированной высоты (для блока footer определено свойство height)!

Выдернем футер из общего потока контента и спозиционируем его абсолютно, причем позиционировать будем относительно нашей обертки (wrapper), а точнее ее левого нижнего угла. Если мы абсолютно спозиционируем футер относительно самого окна браузера, он, конечно, прилипнет к низу, а вот отлепить его обратно будет уже проблематично. Даже когда контент начнет занимать всю страницу.


Что произошло? Да в общем ничего, за исключением того, что ширина футера уменьшилась до ширины его содержимого, а сам он наполз на контент главного блока. Чтобы исправить это пропишем футеру 100% ширину, а блоку main нижний паддинг (отступ).

При этом 100% будут браться от ширины блока wrapper, так как наш футер спозиционирован относительно него.
Однако, проблема по-прежнему не решена: футер парит высоко над землей. Логика подсказывает, что необходимо каким-то образом вытянуть наш шаблон на всю высоту экрана, но при этом не добавляя контент. Справиться с этой задачей поможет свойство минимальной ширины:

Ничего же не изменилось! — возмутитесь вы, и будете правы. Да, мы строго-настрого приказали блоку wrapper растянуться минимум на 100% от высоты доступной ему области. Однако, мы забыли, что этот блок находится внутри тела нашего документа — тега body, а тот, в свою очередь, внутри html, которым никто не потрудился сообщить о том, что следует занять всю доступную высоту. Понаблюдать за этой связью мы можем, назначив body любую высоту, например:


Прогресс налицо — футер уполз вниз. Теперь просто задаем body и html 100%-ную высоту и радуемся прилипшему футеру.

Табличная верстка

Не пугайтесь, никто не заставляет вас верстать таблицами, эта технология постепенно отходит в прошлое. Однако, сложно отрицать тот факт, что таблицы в некоторых аспектах — вещь крайне удобная. Например, в позиционировании футера. Мы можем заставить наши блоки вести себя как строки таблицы с помощью CSS-свойства display:table-row. Это весьма удобный метод, который, к тому же, не требует категорично определять высоту футера.
Блок wrapper станет таблицей, а блоки header, main и footer ее рядами.

На первый взгляд ничего не изменилось. Однако теперь давайте зададим таблице и ее родительским блокам 100%-ную высоту.


Что такое произошло? Наша таблица растянулась на всю высоту экрана, но все блоки имеют равную ширину. Это волшебное свойство таблиц — автоматически выравнивать высоту своих рядов. С этим очень легко разобраться. Зададим футеру и хедеру высоту в 1 пиксел. Не бойтесь, они не превратятся в узкие полоски, их реальная высота будет высчитываться в зависимости от контента. Этот способ лишь позволить блоку main растянуться во всю высоту страницы.


В принципе, никто не мешает вам и здесь задать конкретную высоту для футера или хедера.
[context]

Флексбоксы

На самом деле, таблицы — не самый лучший инструмент для верстки сайтов. Просто потому, что предназначены они для другого. Но принимая во внимание отсутствие специального инструмента, приходилось как-то крутиться. Теперь же этот инструмент есть и поддерживается он уже почти всеми браузерами.


Это флексбоксы.
С их помощью решение проблемы «липкого футера» осуществляется очень просто и очень изящно:

Вот и вся хитрость «липкого» футера.

Верстайте с удовольствием!

Вам будет интересно:

Прижатый к низу футер во всю ширину экрана

8 комментариев

  • HiStO rIaN
    HiStO rIaN
    3/10/2017, 15:04
    C боковой панелью это не подходит....
  • HiStO rIaN
    HiStO rIaN
    3/10/2017, 09:09
    Почему нельзя сделать примеры с боковой панелью? Где вы видели сайты, состоящие только из центрального меню?
    • Мария
      Мария
      3/10/2017, 20:53
      засунь боковую панель внутрь main и будет тебе счастье
      • HiStO rIaN
        HiStO rIaN
        4/10/2017, 08:35
        Умные все такие... Думаешь не пробовал? Все слетело к чертям, футер опять прилип к мэйну и ездил при прокрутке с ним.. Было бы все так просто, не ломал бы голову 3-тьи сутки
        • Мария
          Мария
          4/10/2017, 14:53
          Посмотри тут https://jsfiddle.net/furrycat/wpukgb2a/ самый простой вариант с флексами что не получается? дай ссылку, посмотрим
          • HiStO rIaN
            HiStO rIaN
            7/10/2017, 16:44
            Да уже все, другие помогли.
      • HiStO rIaN
        HiStO rIaN
        4/10/2017, 09:28
        и продолжает прилипать с любыми настройками футера... ну нахер эту фигню бесполезную... проще убрать бесполезный футер или оставить его на вершине, кому не нравится, пусть не заходит на сайт...
  • HiStO rIaN
    HiStO rIaN
    2/10/2017, 22:31
    Как же вы бесите... У друг друга копируете говно! Где пример с нормальным сайтом, где есть сайтбар?? Или нихера в программировании не шарите? Тогда удаляйте гавносайты! Хватит пложить их! Хотя... жалоба думаю поможет избавится от дерьма

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован