如何根据内容设置 mat-drawer-container、mat-drawer 和 mat-drawer-content 高度响应？

Posted 2023-02-18

【中文标题】如何根据内容设置 mat-drawer-container、mat-drawer 和 mat-drawer-content 高度响应？

【英文标题】：How to set mat-drawer-container, mat-drawer and mat-drawer-content height responsive based on content?

【发布时间】：2021-02-01 23:43:59

【问题描述】：

默认情况下 ma​​t-drawer-container/mat-sidenav-container 和 ma​​t-drawer/mat-sidenav 高度基于 ma​​t-drawer-content /mat-sidenav-content，但我想根据自己的内容设置 ma​​t-drawer 高度和 ma​​t-drawer-container 高度根据 ma​​t-drawer 或 ma​​t-drawer-content 中的哪一个来设置。我的 mat-drawer 内容将根据用户输入动态变化，有没有直接的方法可以在 angular material 中做到这一点？

为了更清楚，下面的链接是一个演示应用程序。

i）当我使用 height:100vh 时，我会通过滚动条获得全视图高度（这并不有趣）。

ii）如果我使用 host:mat-drawer-container:100px 它不接受 fit-content 或 100% 作为值，也不接受 max-height:500px。

iii) 尝试过 provide: MAT_DRAWER_DEFAULT_AUTOSIZE, useValue: autosize: true 但当 mat-drawer-content 为空且 mat-drawer 中有一个项目列表时，mat-drawer 不可见。

https://stackblitz.com/edit/angular-mat-drawer-s1vgwr?

【参考方案1】：

从关注开始！

<mat-drawer fxFlex #drawer mode="side"
        style="display: inline-table; overflow: auto; position: fixed; margin-top: 75px">

不断调整，直到满足您的要求。最简单的测试方法是使用浏览器开发工具并从那里调整 css。这是我做的一个项目，也想知道别人的想法。

【讨论】：

感谢您的回答，上面的代码工作机器人没有响应，组件中可用的类似解决方案是<mat-sidenav fixedTopGap="60" fixedBottomGap="0" fixedInViewport="true" >