title: How to make md-sidenav-container full height of div in an angular4 app?
body: <p>I have an angular4 app and am using the angular materials framework <a href="https://material.angular.io/components/sidenav/examples" rel="nofollow noreferrer">https://material.angular.io/components/sidenav/examples</a>. I want to make the md-sidenav-container stretch the whole height of the div without covering up the header. I have attached the fullscreen directive, which causes the sidenav to fill the whole height of the screen thus covering up the header component. This is not what I want. The images show the sidenav stretch above the header, as well as another attempt where it stops at the header but does not stretch to the bottom. I want it to stretch all the way up to the header and all the way down to the bottom of the screen. How do I accomplish this?
  Thanks! </p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="bar"&gt;
    &lt;md-sidenav-container class="example-sidenav-fab-container"&gt;
    &lt;md-sidenav #sidenav mode="side" opened="true" align="end"&gt;
      &lt;!--&lt;button md-mini-fab class="example-fab" (click)="sidenav.toggle()"&gt;--&gt;
        &lt;!--&lt;md-icon&gt;add&lt;/md-icon&gt;--&gt;
      &lt;!--&lt;/button&gt;--&gt;
      &lt;div class="example-scrolling-content"&gt;
        &lt;ul&gt;
          &lt;li&gt;Recommendations&lt;/li&gt;
          &lt;li&gt;Events&lt;/li&gt;
          &lt;li&gt;Settings&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/md-sidenav&gt;
    &lt;button md-mini-fab class="example-fab" (click)="sidenav.toggle()"&gt;
      &lt;md-icon&gt;add&lt;/md-icon&gt;
    &lt;/button&gt;
  &lt;/md-sidenav-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>md-sidenav-container
    :background-color white
    :float right
    :width 300px
    :height 400px
  
  md-sidenav
    :background-color $light-blue
  
  
  //.example-sidenav-fab-container
  //  width: 300px
  //  height: 400px
    //border: 1px solid rgba(0, 0, 0, 0.5)
  
  
  .example-sidenav-fab-container md-sidenav
    max-width: 300px
  
  .example-sidenav-fab-container md-sidenav
    display: flex
    overflow: visible
  
  .example-scrolling-content
    overflow: auto
  
  
  .example-fab
    position: absolute
    right: 20px
    bottom: 10px
  
  .bar
    :height 100%
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/5Z6Ep.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Z6Ep.png" alt="Not what I want"></a></p>