Angular 2 + Material 2 : Sticky Footer with a md-toolbar

Question

I actually try to make a sticky footer within an angular2/Material2 app, from a md-toolbar component.

Maybe this is just not an appropriate element, but this would be nice to make it this way since it would fit the app style with no additionnal code.

I am using Angular 2 (CLI), Material2 (https://github.com/angular/material2) and Flex Layout (https://github.com/angular/flex-layout)

Here is a sample code of what the app looks like :

<md-sidenav-container class="sd-layout">
    <md-sidenav #sidenav class="app-sidenav" mode="push">
        //My links in the sidenav
    </md-sidenav>
    <md-toolbar color="primary">
        //Here is the "REAL" toolbar, on top of page, with app name, and so on
    </md-toolbar>
    <router-outlet>
        //Here is the application display, routing, navigation, security, all the magic happens here
    </router-outlet>
    <my-footer>
        //Here is the custom footer I tried to make... 
    </my-footer>
</md-sidenav-container>

So, basically, nothing weird in this code... Now, the footer template item :

<md-toolbar class="footer">
    //Here is my footer
</md-toolbar>

CSS "footer" Class holds this :

.footer {
    position:relative;
    right:0;
    left:0;
    bottom:0;
}

Once again, nothing magic... At this point, the footer appears directly under the router-outlet. Nice, but not enough : if the router-outlet is empty or not tall enough to fit the page (device height), then it leaves an empty space under it, so we got this kind of display :

What I'd like to get as result :

Thanks for reading / help

Use `position: fixed` if you want it to always be visible, use `position: absolute` if you want it to be at the bottom of all the content. You have to add `padding-bottom` on the body the height of the footer in either case if you don't want other content inside of it. There are so many dupes for this — Zach Saucier, Feb 20 '17 at 12:49
I tried this. Fixed doesn't fit, I don't need it to be always visible. Absolute should fit, but it doesn't work. Probably because of md-toolbar default behaviour... :/ — Julo0sS, Feb 20 '17 at 13:05
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Zach Saucier, Feb 20 '17 at 15:44

score 1 · Answer 1 · answered Sep 12 '17 at 11:32

You can use this: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

<div class="maindiv">
<md-toolbar>your toolbar</md-toolbar>
<md-sidenav-container>your menu</md-sidenav-container>

    <div class="site">
      <div class="content">
        <router-outlet></router-outlet>
      </div>
      <footer>
          <p>footer</p>
      </footer>
    </div>
</div>

end css:

.maindiv {
  min-height: 100vh;
}

.site{
  display: flex;
  flex-direction: column;
  min-height: 94vh;
}

.content{
  flex: 1;
}

score 0 · Answer 2 · answered Feb 23 '18 at 13:30

In order to set the footer always at bottom you can try the below code

<mat-sidenav-container class="container">
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-sidenav-content>
    <div fxLayout="column" style="height:100vh;">
        <div fxFlex>content goes here</div>
        <div fxFlex="50px" fxLayoutAlign="center center" class="footer">footer</div>
    </div>
</mat-sidenav-content>

Here i have created a demo using Angular Material anf Flexlayout

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

and have a look at my git repo

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

Angular 2 + Material 2 : Sticky Footer with a md-toolbar

2 Answers2