title: Footer issue using flexlayout
body: <p>using flexlayout in my project, footer not render properly</p>
  
  <p><em>scenario:</em>
  if there is no text then footer should be stick in bottom of screen, if more then screen content then footer should be push to bottom of screen.</p>
  
  <p><strong>below is my code:</strong></p>
  
  <pre><code>&lt;mat-sidenav-container fxLayout="column" fxFlexFill&gt;
     &lt;mat-sidenav&gt;&lt;/mat-sidenav&gt;    
     &lt;mat-sidenav-content&gt;
       &lt;header&gt;
         &lt;mat-toolbar&gt;&lt;/mat-toolbar&gt;
       &lt;/header&gt;
       &lt;section fxFlexFill&gt; 
         &lt;!--Content Area --&gt;   
       &lt;/section&gt;
       &lt;footer&gt;
          &lt;mat-toolbar&gt;&lt;/mat-toolbar&gt;
       &lt;/footer&gt;    
     &lt;/mat-sidenav-content&gt;    
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>above code taking extra space in footer its mean appearing scroll bar even though less content. can suggest what i missed here.</p>
  
  <p><strong>Using css</strong></p>
  
  <pre><code>body,html{
  height:100%;
  }
  </code></pre>