How to get mat-sidenav-content to take 100% of height using Angular Material

2
votes

How to get mat-sidenav-content to take 100% of height using Angular Material

So I have a side-nav and can't seem to get it to occupy 100% of the height. It gets cut off as you can see in the image. Using latest Angular 8 and Material latest.

You can see the main component css here: https://github.com/born2net/studiopro-web/blob/master/src/app/layouts/main/main.component.scss

if I force it via

<div fxLayout="row" class="container" style="background-color: darkslategray; min-height: 2000px">

it works but of course I do not want to hard code height at 2000px and how it looks like here:

Sean

enter image description here

1
angularangular-materialangular-directive

1 Answers

1
votes

this solved the issue:

.container {
  height: calc(100vh - 70px);