带有填充的垫子抽屉内容不允许滚动到页面底部

Question

昨天我的应用程序滚动条遇到了一个问题。我使用的是Angular材质，我有一个布局组织在以下几个区域:

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

为了更好地观察，我给我的mat-draw -content设置了32px 64px的填充样式(padding: 32px 64px;)。我认为这是我的问题的主要问题，因为当我删除这个填充的滚动工作得很好，去在页面显示所有内容的结束。当填充被应用时，我的mat-drawer-container的高度总是小于mat-drawer-content。

我发现解决这个问题的唯一方法是使用overflow: overlay;但是问题仍然存在，因为我使用这个填充配置进行双滚动，当一个滚动向下时，我仍然需要将另一个滚动推到底部(这会导致糟糕的用户体验)。

如果我应用边距而不是填充，同样的情况发生，所以我的问题是:有没有办法提供一个良好的垫/边距在垫-抽屉-内容没有搞乱在内容区域的滚动?

我的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%;
}

Answer 1

我找到了一个解决方案。我已经从mat-draw -content中删除了padding:32px 64px，并将其应用到一个新的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%;
}