See the following StackBlitz for the app in question: https://stackblitz.com/edit/angular-7cazwh?file=src%2Fapp%2Fapp.component.html
<div class="main-div">
<mat-toolbar color="primary" class="app-header">
<button mat-icon-button (click)="toggleSidenav()">
<mat-icon>menu</mat-icon>
</button>
<span>Config</span>
<span class="spacer"></span>
<button mat-icon-button>
<mat-icon>account_circle</mat-icon>
</button>
<span>Admin</span>
</mat-toolbar>
<mat-drawer-container class="app-sidenav">
<mat-drawer #sidenav mode="side" opened="true" class="sidenav" fixedInViewport="false">
<mat-list>
<mat-list-item>
<mat-icon matListIcon>people</mat-icon>Users
</mat-list-item>
<mat-list-item>
<mat-icon matListIcon>devices_other</mat-icon>Devices
</mat-list-item>
</mat-list>
</mat-drawer>
<mat-drawer-content>
<p style="margin:20px">TODO: mat-sidenav-content</p>
</mat-drawer-content>
</mat-drawer-container>
</div>
.spacer {
flex: 1 1 auto;
}
.main-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
height: 100vh;
}
.app-header {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.app-sidenav {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
Currently when the page overflows I end up with the scrollbar on the right side, that spans both the header area (where mat-toolbar
is placed) and the content area (where mat-sidenav-content
is placed). As shown below:
What I want instead, is the scrollbar to be only shown in the content area as demonstrated below. I want the header and the left side menu to stay pinned (not move while the user is scrolling up and down within the overflowing content):
This scroll is being applied to your body
element. You may want to simply reset the margin
and padding
for the html
and body
elements:
body, html {
padding: 0;
margin: 0;
}
https://stackblitz.com/edit/angular-eddznu?file=src%2Fstyles.css