Прилипающий футер (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:

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

Павел Прудников

Постигающий дзен фулстэк вэб буддизма

Минск, Беларусь

Подписаться на Блог MEAN stack разработчика

Получайте свежие записи прямо на ваш почтовый ящик.

Или подпишитесь на RSS с Feedly!

Комментарии

comments powered by Disqus