"Нелипкий" футер

Размышление верно при условии, что футер задумывался, как "липкий"

Текущая структура шаблона pug:

html
  body
    .wrapper
      header
        p Header content
      .content
        p Main content
      footer
        p Footer content

и стилей:

html {
  height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;  
}

.content {
  flex-grow: 1;
}

footer, header {
  flex-shrink: 0
}

В этом случае футер не прилипает к низу страницы, поскольку .wrapper получает height: auto (по контенту), так как высота родителя (в данном случае это body) не задана явно.

Но если установить:

body {
  height: 100%;
  ...
}

.wrapper {
  ...
  min-height: 100vh;
}

то .wrapper расширится до высоты страницы, сработает flex-grow у .content и футер прижмется к низу.

ПС. Протестировал, вылез баг IE10-11, из-за которого значение min-height флекс-контейнера игнорируется его детьми. Лечится добавлением к обертке (здесь body):

display: flex;
flex-direction: column;

разъяснение: https://github.com/philipwalton/flexbugs#flexbug-3

И напоследок: так же решает задачу установление height: 100% для всех - html, body и .wrapper, без остальных плясок с бубнами.

FARCER / Start-template-gulp-4-pug-sass

"Нелипкий" футер #17