December 2, 2018

Material 2: Sticky Footer with Mat Sidenav

My guess is your using Angular in combination with Angular Material and you desperately need a sticky footer, ideally, in a variable height. No need to look any further. This article will provide you with a basic solution for given circumstances.

This article was updated and tested for Angular 7 and Material 2 Version 7.1.1

A very common use case for the Sidenav of Material 2 is the use in a layout with a sticky footer. Unfortunately, the documentation of the <mat-sidenav> does not show how to do this best. But that’s not a big deal, because you can achieve your goal quickly if you know how to use Flexbox.

We assume that routing is used. In addition to the sticky footer, we want to make sure that the component that is included via routing also takes on the full height. In order to do so we add a display:block; and and flex:1; to first level children of our main HTML tag.

You can find a demo here. And this is the repository.

Below is a shortened version of the template for our Sidenav (demo location: src/app/app.component.html).

The corresponding styles can be written in the global styles.scss or in the corresponding style sheet (demo location: src/app/app.component.scss).

And that’s it. Happy coding!

Related Posts

Christian Heitmann
Developer at thecodecampus </>


7 responses to “Material 2: Sticky Footer with Mat Sidenav”

  1. andy says:

    Thank you for the tips. Will give it a go now

  2. Bryan says:

    Thanks – nice solution

  3. boccione says:

    Ciao, thx for your demo. I have only one dubt, perhaps unsurpassable :
    In the demo, the route ‘Bar’, Chrome for mobile doesn’t show the footer, there is the navigation bar that hides the footer and you have to scroll. So… i dont’t know… is it unsurpassable?
    grazie

  4. Zikku says:

    Thanks – nice solution. But can you help me when the sidenav should not overlap the toolbar? So the mat-toolbar is outside the mat-sidenav-container. I have problems with the page-wrap and the min-height etc.

  5. ricardo9300@gmail.com says:

    Thanks! good solution!

  6. pktechie says:

    plz update the code for angular 6, here footer is not working, thx in advance.

  7. Philippfx says:

    Please update for Angular 6. It doesn’t work for me either.

Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.