9

I have an angular4 app and am using the angular materials framework https://material.angular.io/components/sidenav/examples. 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!

Html

<div class="bar">
  <md-sidenav-container class="example-sidenav-fab-container">
  <md-sidenav #sidenav mode="side" opened="true" align="end">
    <!--<button md-mini-fab class="example-fab" (click)="sidenav.toggle()">-->
      <!--<md-icon>add</md-icon>-->
    <!--</button>-->
    <div class="example-scrolling-content">
      <ul>
        <li>Recommendations</li>
        <li>Events</li>
        <li>Settings</li>
      </ul>
    </div>
  </md-sidenav>
  <button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
    <md-icon>add</md-icon>
  </button>
</md-sidenav-container>
</div>

Css

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%

Not what I want

3 Answers 3

29

I have found this workaround that works ok

HTML

<md-sidenav-container id="container" fullscreen >

CSS

#container {
 top: 64px !important;
}

@media(max-width: 599px) {
  #container {
    top: 56px !important;
  }
}

top has to have the same height of your toolbar. Remember that the standard Angular Material toolbar height becomes smaller when the width is less than 600px .

3
  • 2
    It works, although I agree it works ok, there has to be a better solution for this out there. Jul 4, 2017 at 18:10
  • 1
    The answer below by @bdiloreto is a better solution! Oct 5, 2017 at 23:53
  • 1
    In the latest version of Material design (at the moment of writing), you can set fixedInViewport="true" and fixedTopGap="72" or whatever value is relevant, see material.angular.io/components/sidenav/api Aug 9, 2020 at 23:10
25

I struggled with the same problem. The solution of setting the top to 64px did not work for me.

I found two different solutions.

  1. The first solution uses flexbox. Put the md-toolbar and md-sidenav-container inside of a div with height: 100% and uses display: flex with flex-direction: column.

  2. Alternatively, and this solution may actually do the same thing, you can leave the md-toolbar and md-sidenav-container items at the root level, and then make the md-sidenav-container have a height: calc(100% - 64px) where the height of the toolbar is 64px.

3
  • This is the correct answer. I have a navigation that acts like a frame around my whole site, it has a top-nav, sidenav that slides out on mobile. And this is what I used for it. Also within it's content area, on some of our pages we have advanced search forms that also slide out. So this is a sidenav-container nested within another sidenav-container's content area. Again, the same problem arises on pges where the content does not push past the fold or bottom of the viewport we use this same code there. REmember that if your navigation is smaller like mine (45px) don't just plug in 65px lol Oct 5, 2017 at 23:52
  • None of the suggestions works. However, the accepted answer does. Sorry to say ... ;)
    – Trinimon
    Aug 24, 2020 at 19:52
  • I set flex-grow: 1 on the sidenav-container
    – Yuval
    Jun 11, 2023 at 21:11
9
html, body, material-app, mat-sidenav-container {
  height: 100%;
  width: 100%;
  margin: 0;
}
3
  • 1
    u mean classes .material-app, .mat-sidenav-container ? Mar 14, 2019 at 18:31
  • The only one answer that really works. Thanks a lot.
    – amedina
    Oct 18, 2019 at 17:44
  • This seems to work if the sidenav occupies 100% of the height of the page, but when there is a toolbar and the sidenav is under it, this style makes the height too big: 100% + the height of the toolbar, so you end up with a vertical scrollbar Aug 9, 2020 at 22:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.