如何固定 mat-toolbar 和 mat-sidenav 并且在 mat-sidenav-content 内只有一个滚动条?

Posted

技术标签:

【中文标题】如何固定 mat-toolbar 和 mat-sidenav 并且在 mat-sidenav-content 内只有一个滚动条?【英文标题】:How to pin mat-toolbar and mat-sidenav and only have a scrollbar inside mat-sidenav-content? 【发布时间】:2021-08-21 18:49:40 【问题描述】:

请参阅以下 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)。如下图:

我想要的是滚动条仅显示在内容区域中,如下所示。我希望标题和左侧菜单保持固定(当用户在溢出的内容中上下滚动时不要移动):

【问题讨论】:

【参考方案1】:

此滚动正在应用于您的 body 元素。您可能想简单地重置 htmlbody 元素的 marginpadding

body, html 
  padding: 0;
  margin: 0;

https://stackblitz.com/edit/angular-eddznu?file=src%2Fstyles.css

【讨论】:

你是个天才。非常感谢,我花了几个小时试图解决这个问题。 遗憾的是,这似乎只在 StackBlitz 中有效,在实际的 Chrome 浏览器中运行时无效。 @Eternal21 您在项目中的何处添加了此规则?它应该在***样式表中。您可能还想考虑包含一个“重置”样式表。像这样的东西:meyerweb.com/eric/tools/css/reset 我在 src 文件夹的根 styles.scss 中添加了它。 @Eternal21 好的,很好。您的工具栏和浏览器边缘是否还有任何填充或边距?如果是这样,可能还有其他一些样式在起作用,这会导致您出现问题。

以上是关于如何固定 mat-toolbar 和 mat-sidenav 并且在 mat-sidenav-content 内只有一个滚动条?的主要内容,如果未能解决你的问题,请参考以下文章

如何让 mat-sidenav 占据 mat-toolbar 下方的整个垂直空间?

Mat-Toolbar 对齐项目(左,中,右)

vscode 抱怨未知元素(mat-toolbar)

Mat-toolbar 不会采用原色

如何在角度轮询期间保持过滤器完好无损?

带有材料设计垫工具栏问题的Angular 6 [重复]