如何制作 angular material 卡片以获取可用的垂直 space 并使其内容可滚动

Question

我正在尝试使 material-card (mat-card) 在屏幕上可用 space，然后使其内容 (mat-card-content) 可滚动，因为项目里面的内容比可用的多space。

我试过以下 CSS 但这只是部分解决方案，因为我对内容使用了固定高度。

.mat-card-content {
    height: 620px;
    overflow: auto;
  }

这里的问题是不同的屏幕分辨率，所以在某些情况下它看起来不错，但在其他情况下会有很多空白 space 可以使用。

Answer 1

对于可滚动的内容，请尝试在您的元素上添加 overflow-y 属性，并将其设置为 scroll。这会导致其上的所有垂直溢出都可以滚动。

.mat-card-content {
    height: 620px;
    overflow-y: scroll;
}

Source.

要将卡片拉伸到全高，请尝试在 mat-card class 上使用 height: 100%。

mat-card {
  height: 100%;
}

Answer 2

所以这就是我解决问题的方法：

.mat-card {
  height: 90% !important;
  position: relative;
  overflow: hidden;
}

.mat-card-content {
  max-height: 100%;
  position: absolute;
  overflow: auto;
}

这样我的垫卡将占用 90% 的可用 space，然后内容将占用垫卡的 100% 可用 space。这里的关键是将mat-card位置设置为relative，mat-card-content位置设置为absolute。

Answer 3

这可能可以通过 flexbox 实现。

最简单的方法是做这样的事情：如果你给你的卡一个包装纸

.card-wrapper {
  display: flex;
  overflow: hidden;
}

那么你应该可以给你的卡一个弹性增长和收缩

.card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}
.mat-card-content {
  flex: 1 1 auto;
  overflow: auto;
}

这里有一个 stackblitz 的例子。查看我添加到 styles.css 和 app.component.css 的内容。你可以看到卡片的边界总是占据整个应用程序的高度和宽度。如果您调整 window 的大小，它会滚动或不滚动。 https://stackblitz.com/edit/angular-smp5qu

根据您的应用程序，您可能需要调整其中一些样式以使其与页面上的任何其他元素一起正常工作。

如何制作 angular material 卡片以获取可用的垂直 space 并使其内容可滚动

how to make angular material card to take available vertical space and make it's content scrollable

html

css

angular

angular-material-7