垫子抽屉内容滚动无法正常工作

Question

我有一个页眉、一个 sidenav 和一个页脚组件作为我网站的共享模块。

我正在尝试创建一个表单来在 sidenav 内容中搜索产品，为此我创建了一个如下所示的布局模块。

default.html

<app-header (toggleSideBarForMe)="sideBarToggler()"></app-header>

<mat-drawer-container>
    <mat-drawer mode="side" [opened]="sideBarOpen">
        <app-sidebar></app-sidebar>
    </mat-drawer>
    <mat-drawer-content>
        <router-outlet></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

<app-footer></app-footer>

default.scss

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}
mat-drawer {
  width: 350px;
}

mat-drawer-container {
  height: 100%;
}

mat-drawer-content {
  padding: 20px;
}

一切正常，但是当我向下滚动我的搜索表单页面时，页脚与我的按钮重叠，如下所示。

有人能告诉我哪里做错了吗？任何形式的帮助将不胜感激。

PS：我不擅长CSS，有点难懂。与此同时，我也在google上寻找解决方案。

Answer 1

如果我没理解错的话，这两个按钮（红色和蓝色）在您的搜索表单页面上并且可以滚动。

尝试在搜索页面的容器上应用padding-bottom:<the height of footer>px。

垫子抽屉内容滚动无法正常工作

Mat drawer content scroll not working properly

html

css

responsive-design

angular-material

angular