'Bug mat-drawer-content height 100% angular 8

css:

.mat-drawer-content {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
    overflow: auto;
}

Hello, I have a problem that my content is not occupying a full screen, and a screen is creating a scroll, and there is no need, because of the header, how can I fix it?

Thanks

angular angular-material

Solution 1:^[1]

This worked for me

.mat-drawer-container,
  .mat-drawer-content {
    height: auto !important;
    overflow: hidden !important;
  }

Solution 2:^[2]

try height: 100vh; along with your other styles or try this alone.

Solution 3:^[3]

I had this issue appearing on page load and since the side-nav was not opened, there was an empty div that appeared. So I made the changes below:

  .mat-drawer-container,
  .mat-drawer-content {
    height: auto;
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lewis U Uzoma
Solution 2	Shankarlal D
Solution 3	ouflak

'Bug mat-drawer-content height 100% angular 8

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]