[英]How to pin mat-toolbar and mat-sidenav and only have a scrollbar inside mat-sidenav-content?
有关有问题的应用程序,请参阅以下 StackBlitz: 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;
}
目前,当页面溢出时,我最终会看到右侧的滚动条,它跨越 header 区域(放置mat-toolbar
的位置)和内容区域(放置mat-sidenav-content
的位置)。 如下所示:
相反,我想要的是滚动条仅显示在内容区域中,如下所示。 我希望 header 和左侧菜单保持固定(当用户在溢出的内容中上下滚动时不要移动):
此滚动正在应用于您的body
元素。 您可能想简单地重置html
和body
元素的margin
和padding
:
body, html {
padding: 0;
margin: 0;
}
https://stackblitz.com/edit/angular-eddznu?file=src%2Fstyles.css
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.