无法弄清楚为什么在较小的分辨率下按下材质工具栏

Question

https://stackblitz.com/edit/angular-5p7xog?file=app%2Fsidenav-responsive-example.html

我正在修改Angular材料页面上找到的sidenav示例之一。 sidenav完美适用于较大的分辨率，但一旦缩小，标题会弹出，在其上方留下空白。任何人都可以解释这里发生了什么以及可能的解决方案吗？

Answer 1

它的发生是因为您在移动视图中明确将56px设置为边距。

  <mat-sidenav-container class="example-sidenav-container"
                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">

哪个好，但是因为元素的位置变为固定。你需要将top设置为0，否则它将采用margin-top。

将工具栏样式修改为此

.example-is-mobile .example-toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
  top: 0;
}