Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы

[@jonSina]

не работает, если в боди много контента, то футер уезжает за экран вниз

[@hisbvdis]

Суть данного способа в том, чтобы удерживать футер внизу экрана, если содержимого недостаточно.
При его избытке футер и должен смещаться

[@TerraV]

С чего это вы решили стричь всех под одну гребенку? Мне удобно когда футер зафиксирован внизу и виден всегда. Элементарно когда мне присылают скрин я вижу версию и среду на которой возникла проблема. Банковский сектор если что.

[@hisbvdis]

Пользователь написал:

не работает, если в боди много контента, то футер уезжает за экран вниз

Когда я в ответ писал «футер и должен смещаться», имел в виду, что такое поведение и предусмотренно в подходе, описанном в этой заметке.

Я не пытался утверждать, что это концепция, которой должны все придерживаться.

[@Fragster]

Вот решение:
jsfiddle.net/zbjsr6wv/2
Для расположения содержимого по центру, если его мало — класс centered
Для проматывания содержимого, если его много, с оставлением футера — scrollable
Если какого-то поведения не нужно — убираешь соответствующий класс и всё.

[@Dartess]

Проблема

В демонстрационном Codepen выше я добавила к элементу main свойство outline, чтобы продемонстрировать, что при использовании метода Flexbox, main не заполняет всю доступную высоту. Вот почему мы должны использовать именно трюк с margin-top: auto.

На самом деле достаточно использовать flex-grow: 1 на main, тогда "проблемы" не будет

[@hisbvdis]

Боюсь, я неправильно передал суть исходного смысла.
Возможно, стоило бы назвать это «особенностью».
В конце статьи автор указывает, что разные способы применимы в разных ситуациях.
Подумаю, можно ли заменить чем-то получше

Если есть идеи, можете предложить

[@Fragster]

jsfiddle.net/zbjsr6wv/2

[@ajhdfhl]

Интересное решение. Но у меня есть свое, может кому пригодится.

-----HTML Разметка такая:-----
<-body>
<-div class=«wrapper»>

<-div class=«content»>

<-header class=«header»>

<-/header>

<-/div>

<-footer class=«footer»>

<-/footer>

<-/div>
<-/body>

------CSS код:------

html,
body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer{
flex: 0 0 auto;
}

[@opaopalalala]

Использование «vh» сильно ухудшает степень поддержки готового решения в браузерах (65-70%).
Если вместо

body { min-height: 100vh; }

использовать

html { height: 100%; }
body { min-height: 100%; }

то уровень поддержки увеличится до уровня поддержки flexbox-ов (85-99%).

[@hisbvdis]

На каком основании и с какой целью Вы делаете подобные заявления?
Поддержка IE 9+ и 95% по Caniuse: caniuse.com/#feat=mdn-css_types_length_vh

[@opaopalalala]

Да, ошибся. Смотрел Caniuse, но видимо зацепился не за тот блок.