title: Best way to manage height of angular components to fit in screen
body: <p>I am having troubles with height of my components... I have a <code>mat-toolbar</code> in a component called <code>app-navbar</code>, and I have another component called <code>app-sidebar</code>with a <code>mat-nav-list</code> (which is a side left bar menu)</p>
  
  <p>I have a third component which gets both together, but this is happening:</p>
  
  <p><a href="https://i.stack.imgur.com/4668l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4668l.png" alt="enter image description here"></a></p>
  
  <p>Last item of the <code>nav-list</code> I want it at the bottom of the page, but giving 100% height to <code>mat-sidenav-container</code> component, makes it go "out" of the page, even if the content of the page has no scroll. I can have it correctly by setting it's height as: <code>height: calc(100% - 64px)</code> which 64px is height of th material toolbar (by default). I don't feel like this is a correct solution, because if material decides sometime on changing the size of the height, I will have troubles.</p>
  
  <p>Is there any way using flex or similar to make it better?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;app-navbar [mySideBar]="snav" fxFlex&gt;&lt;/app-navbar&gt;
  &lt;/div&gt;
    &lt;mat-sidenav-container&gt;
      &lt;mat-sidenav autoFocus="false"
                    #snav mode="side"
                    fixedInViewPort="true"
                    [mode]="side"
                    [opened]="true"&gt;
        &lt;app-sidebar [mySideBar]="snav"&gt;&lt;/app-sidebar&gt;
      &lt;/mat-sidenav&gt;
      &lt;mat-sidenav-content fxLayout="column"&gt;
        &lt;!-- content --&gt;
      &lt;/mat-sidenav-content&gt;
    &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>mat-sidenav-container {
    height: calc(100% - 64px);
  }
  </code></pre>
  
  <p>Or maybe reading height size of <code>mat-toolbar</code> instead of hardcoding it?</p>