1

昨天我的应用程序滚动出现问题。我正在使用 Angular Material，并且我在以下区域组织了一个布局：

  • mat-toolbar在页面顶部；
  • mat-drawer在页面左侧用于导航；
  • mat-drawer-content我有我的路由器插座。

为了更好地观察，我给我的 mat-drawer-content 设置了一个 32px 64px 值 ( padding: 32px 64px;) 的填充样式。我认为这是我的问题的主要问题，因为当我删除此填充时，滚动工作正常，并在页面末尾显示所有内容。应用填充时，我的 mat-drawer-container 的高度始终小于 mat-drawer-content。

我发现解决这个问题的唯一方法是使用溢出：覆盖；对于 mat-drawer-content，但问题仍然存在，因为我有一个使用这种填充配置的双滚动，当一个滚动向下时，我仍然需要将另一个滚动到底部（这会导致糟糕的用户体验） .

如果我应用边距而不是填充，也会发生同样的情况，所以我的问题是：有没有办法在 mat-drawer-content 中提供良好的填充/边距而不会弄乱内容区域中的滚动？

我的 HTML 结构：

<div class="app-main-wrapper-full">
   <mat-toolbar color="primary">
      ...
   </mat-toolbar

   <mat-drawer-container class="full-heigth" hasBackdrop="true" autosize>
      <mat-drawer #drawer mode="side">
         <mat-nav-list>
            ...
         </mat-nav-list>
      </mat-drawer>
      <mat-drawer-content class="full-heigth">
         <router-outlet></router-outlet>
      </mat-drawer-content>
   </mat-drawer-container>
</div>

我的 CSS：

.app-main-wrapper-full {
    height: 100%;

    mat-toolbar {
      border-bottom: 4px solid $light-blue;
    }

    mat-drawer-content {
      height: 100%;
      padding: 32px 64px;
      background-color: $light-grey;
    }
}

.full-heigth {
   height: 100%;
}
4

1 回答 1

0

我找到了解决方案。我已经padding:32px 64px从 mat-drawer-content 中删除了它并将其应用到一个新的 div 中，其中包含 router-outlet。

最终的 HTML：

<div class="app-main-wrapper-full">
   <mat-toolbar color="primary">
      ...
   </mat-toolbar

   <mat-drawer-container class="full-heigth" hasBackdrop="true" autosize>
      <mat-drawer #drawer mode="side">
         <mat-nav-list>
            ...
         </mat-nav-list>
      </mat-drawer>
      <mat-drawer-content class="full-heigth">
         <div class="content">
             <router-outlet></router-outlet>
         </div>
      </mat-drawer-content>
   </mat-drawer-container>
</div>

最终的 CSS

.app-main-wrapper-full {
    height: 100%;

    mat-toolbar {
      border-bottom: 4px solid $light-blue;
    }

    mat-drawer-content {
      height: 100%;
      background-color: $light-grey;
    }

    .content {
        padding: 32px 64px;
    }
}

.full-heigth {
   height: 100%;
}
于 2021-08-13T13:09:46.597 回答