Angular 2 + Material 2：带有md工具栏的Sticky Footer

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

Answer 1

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;
}

Answer 2

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