如何使用 Angular Material 和响应式侧边栏制作动态高度？

Question

我按照 this guide 使用 Angular Material 创建了响应式侧边栏菜单。现在我正在尝试使用动态数据使屏幕的内容部分正确呈现。呈现静态页面时内容看起来不错。例如，欢迎页面如下：

但是，当我有一个包含动态数据的列表屏幕时，我无法向上滚动以查看整个列表。该列表在内容部分之上，也在其下方溢出。

我可以通过将 .content class 从使用 height: calc(100vh - 98px) 更改为 height: auto 来解决这个问题，但是这会导致常规屏幕看起来很有趣，因为内容部分没有'流到底部。

带有列表的屏幕看起来好多了，您可以滚动查看其所有内容。

是否可以 1) 使其高度动态并延伸到底部同时允许滚动？另外，如何让静态内容呈现在顶部而不是垂直居中？

您可以通过克隆此 repo 和运行它的 Angular Material 示例来查看此问题的实际情况：

git clone -b styles-support https://github.com/manfredsteyer/angular-crud.git
cd demo-material
npm install
npm start

Answer 1

您可以像这样设置内容的最小高度div

min-height: calc(100vh - 98px);
height:auto;

这种方式和自动高度，因此它会展开并看起来合适

Answer 2

您可以通过在 .content class

中添加 min-height: 100% 来解决此问题

How to make dynamic height with Angular Material and responsive sidebar?