CODEWITHSUNDEEP
angularangular-material
Emanuel Bessa
Emanuel Bessa

Reputation: 31

Bug mat-drawer-content height 100% angular 8

enter image description here

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

Upvotes: 1

Views: 2327

Answers (3)

Lewis U Uzoma
Lewis U Uzoma

Reputation: 21

This worked for me

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

Upvotes: 2

coding BBQ
coding BBQ

Reputation: 1

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;
  }

Upvotes: 0

Shankarlal D
Shankarlal D

Reputation: 183

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

Upvotes: 0

Related Questions