November 2, 2017

Material 2: Sticky Footer with Mat Sidenav

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.

Demo here.


And the corresponding styles (for this example I have added the styles globally, but it would also work if the styles were included in the app. component. scss).

Can Kattwinkel

Entwickler bei thecodecampus

Comments (7)

  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?

  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. 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

Your email address will not be published. Required fields are marked *