时间戳

首页 > 解决方案 > 垫抽屉内容滚动无法正常工作

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

问题描述

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

在此处输入图像描述

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

默认.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>

默认.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，所以有点难以理解。同时我也在谷歌上寻找解决方案。

标签： htmlcssangularresponsive-designangular-material

解决方案

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

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

推荐阅读