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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<mat-sidenav-container class="all-wrap"> <mat-sidenav #sidenav over> <mat-list> <mat-list-item>...</mat-list-item> </mat-list> </mat-sidenav> <mat-sidenav-content class="page-wrap ..."> <mat-toolbar> <mat-toolbar-row> <span> <mat-icon (click)="sidenav.open()" >menu </mat-icon> </span> <span><h1>Toolbar</h1></span> </mat-toolbar-row> </mat-toolbar> ... <main class="content"> <router-outlet></router-outlet> </main> <footer> <h2>Sticky Footer !!</h2> <p>... with variable height</p> </footer> </mat-sidenav-content> </mat-sidenav-container> |
The corresponding styles can be written in the global styles.scss or in the corresponding style sheet (demo location: src/app/app.component.scss).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* * Actual Sticky Footer Styles */ .all-wrap { min-height: 100vh; // same height as browser window height } .page-wrap { display: flex; flex-direction: column; min-height: 100vh; // same height as browser window height } .content { flex: 1; // child will set to an equal size inside the container } /* * Make the component injected by <router-outlet> full height: */ main { display: flex; flex-direction: column; // Select all direct descendants only of the <main> element // that are not <router-outlet> elements: > *:not(router-outlet) { flex: 1; // child will set to an equal size inside the container display: block; } } |
And that’s it. Happy coding!
Christian Heitmann
Developer at 
Hi, I am a software engineer from Germany with a focus on frontend technologies and an affinity for everything related to UI/UX. However, my greatest challenge to date has been learning Japanese.
Thank you for the tips. Will give it a go now
Thanks – nice solution
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
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.
Thanks! good solution!
plz update the code for angular 6, here footer is not working, thx in advance.
Please update for Angular 6. It doesn’t work for me either.
For angular >= 6, change your
contentclass as this:source: https://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api
I checked it and it almost works on Angular 8.x
<mat-sidenav-content class="page-wrap ...">does not work as the material library adds the.mat-drawer-contentclass, containing adisplay: blockstyle, which overrides thedisplay: flexfrom ‘page-wrap’.By wrapping the child into a
and assigningpage-wrapmakes it work again. So like this:Yay google is my world beater assisted me to find this
great website!
Hello!
I I apologize but most likely this question is already somewhere here and discussed, in the search I did not find anything unfortunately.
Searched for information in World Wide Web, blogs , blogs , thematic and news sites, etc.
Many googles and readers about affiliates sra . I’m not really understood where appeared visitors to my sites?
P.S.
Thank you for any advice)
You can reply to the mail: carltonkarlis@gmail.com
Thanks so much, you helped me big time ! You’re the only documentation on how to make a sticky footer on Angular. Found your tutorial and it was my last hope: it turned out to be successful so once again, a huge THANK YOU!