mat-sidenav-content内容在页面滚动条后面溢出

Question

我正在使用Bootstrap运行Angular 7，并且正在尝试设置mat-sidenav-container

我面临的问题是mat-sidenav-content内的所有内容（页面的主要内容）在内容的浏览器滚动条后面溢出。

我搞砸了，将溢出更改为无济于事。我知道添加页边距可能会解决该问题，但是我觉得它很乱，因为某些页面没有滚动条。

这与我在使用此示例时使用引导程序有关吗？ https://stackblitz.com/angular/klqaabgjllb?file=app%2Fsidenav-responsive-example.ts

Answer 1

向您的autosize添加一个mat-sidenav-container属性。它有助于通过Angular材质抽屉重新计算边距和填充物。

尽管从性能上讲，它是有代价的，所以如果动画对您很重要，您可能希望在动画制作后的几秒钟内放置一个计时器将其禁用。

Answer 2

从position: absolute;外部的页面容器的css中删除mat-sidenav可以为我修复此问题，并将滚动条推到其外部。

Answer 3

对我有用的是

// component.html
<mat-sidenav-container #sidenavContainer>
      <mat-sidenav opened mode="side" #sidenav fixedInViewport="true">
        Side Nav
      </mat-sidenav>
      <mat-sidenav-content>
        Main Content
      </mat-sidenav-content>
    </mat-sidenav-container>


// component.ts
export class Component implements OnInit, AfterViewInit {
  @ViewChild("sidenavContainer", { static: false })
  sideNavContainer: MatSidenavContainer;

  ...

  ngAfterViewInit() {
    // calling updateContentMargins on next tick, fixes the spacing.
    setTimeout(() => {
      this.sideNavContainer.updateContentMargins();
    }, 0);
  }
}