title: Angular 2 + Material 2 : Sticky Footer with a md-toolbar
body: <p>I actually try to make a sticky footer within an angular2/Material2 app, from a md-toolbar component.</p>
  
  <p>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.</p>
  
  <p>I am using Angular 2 (CLI), Material2 (<a href="https://github.com/angular/material2" rel="nofollow noreferrer">https://github.com/angular/material2</a>) and Flex Layout (<a href="https://github.com/angular/flex-layout" rel="nofollow noreferrer">https://github.com/angular/flex-layout</a>)</p>
  
  <p>Here is a sample code of what the app looks like : </p>
  
  <pre><code>&lt;md-sidenav-container class="sd-layout"&gt;
      &lt;md-sidenav #sidenav class="app-sidenav" mode="push"&gt;
          //My links in the sidenav
      &lt;/md-sidenav&gt;
      &lt;md-toolbar color="primary"&gt;
          //Here is the "REAL" toolbar, on top of page, with app name, and so on
      &lt;/md-toolbar&gt;
      &lt;router-outlet&gt;
          //Here is the application display, routing, navigation, security, all the magic happens here
      &lt;/router-outlet&gt;
      &lt;my-footer&gt;
          //Here is the custom footer I tried to make... 
      &lt;/my-footer&gt;
  &lt;/md-sidenav-container&gt;
  </code></pre>
  
  <p>So, basically, nothing weird in this code...
  Now, the footer template item : </p>
  
  <pre><code>&lt;md-toolbar class="footer"&gt;
      //Here is my footer
  &lt;/md-toolbar&gt;
  </code></pre>
  
  <p>CSS "footer" Class holds this : </p>
  
  <pre><code>.footer {
      position:relative;
      right:0;
      left:0;
      bottom:0;
  }
  </code></pre>
  
  <p>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 : </p>
  
  <p><a href="https://i.stack.imgur.com/lfwfc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lfwfc.jpg" alt="enter image description here"></a></p>
  
  <p>What I'd like to get as result : </p>
  
  <p><a href="https://i.stack.imgur.com/mlNwF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mlNwF.jpg" alt="enter image description here"></a></p>
  
  <p>Thanks for reading / help</p>