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 (1)

  1. andy says:

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

Leave a Reply

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