I set my sidenav to fit 100% of the screen height this way:
My app.component.html:
<md-toolbar>etc</md-tooblar>
<router-outlet></router-outlet>
One of my routes refers to the sidenav this way:
admin.component.ts
<md-sidenav-container>
<md-sidenav #sidenav mode="side" opened="true" class="sidenav">
My Sidenav
</md-sidenav>
<div class="sidenav-content mat-typography">
<router-outlet></router-outlet>
</div>
</md-sidenav-container>
admin.component.css:
md-sidenav-container {
height: 100vh;
}
The problem is that the height is 100% not including the toolbar from my main app component, and there is a scrollbar in any of my pages.
I tried to set my md-sidenav-container height to 93% (which fits perfectly in my screen) but in other screens the container misses about 30-50 pixels from the bottom of the screen (the container don't reach the screen bottom).
Any solution for this?
height: 100%
is relative to the parentdiv
's height. Wouldn'theight: 100vh
be more appropriate here? – I haz kode Jul 30 '17 at 12:32height: 100vh
, the result is same: scrollbar appears in every single page (the toolbar height is not calculated). I have 2<router-outlest>
because those are 2 different modules. – TheUnreal Jul 30 '17 at 12:35height: calc(100vh - 50px);
did the trick, now the height works great on any screen – TheUnreal Jul 30 '17 at 12:43