Прилипающий футер (sticky footer) на Angular 2+ и Flex-layout

Задача старая, инструменты новые. Приклеиваем футер к полу. Теперь на Angular с его новым движком компоновки Flex-layout.

Пусть мы имеем файл app.component.ts с шаблоном вида:

  template: `
    <div class="app-container">
      <div class="header"></div>
      <div class="body"></div>      
      <div class="footer"></div>
    </div>`

Для начала зададим высоту 100% для родительских элементов в файле style.css:

html, body, .app-container {
    height: 100%;
}

В шаблоне для .app-container зададим модель выравнивания в колонку с растягиванием по ширине:

<div class="app-container" fxLayout="column" fxLayoutAlign="start stretch">
...

Между блоками .body и .footer требуется добавить вспомогательный div, который будет занимать все свободное пространство между ними, когда контента до футера не хватает.

<div class="helper" fxFlex fxFlexFill></div>

Здесь важно заметить, что требуется указать и fxFlex, и fxFlexFill, хотя из документации выглядит, что прописывать fxFlex не требуется. Однако без него не работает.

Ну и собственно все! Можно поиграться с Plunker:

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

Menu