如何解决如何固定 mat-toolbar 和 mat-sidenav 并且在 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;
}
目前,当页面溢出时,我会在右侧显示滚动条,它跨越标题区域(放置 mat-toolbar
的位置)和内容区域(放置 mat-sidenav-content
的位置)。如下图:
我想要的是滚动条仅显示在内容区域中,如下所示。我希望标题和左侧菜单保持固定(当用户在溢出的内容中上下滚动时不要移动):
解决方法
此滚动正在应用于您的 body
元素。您可能只想重置 margin
和 padding
元素的 html
和 body
:
body,html {
padding: 0;
margin: 0;
}
https://stackblitz.com/edit/angular-eddznu?file=src%2Fstyles.css
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。