扩展数据视图背景颜色以填充卡片

Question

我有这个：

https://stackblitz.com/edit/primeng-dataview-demo-1kpf4h?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.scss

确保您位于网格视图中。

我想要的只是流行的背景来扩展卡片的整个宽度（仅在底部）。所以它与上面卡片的其余部分颜色不同。位置正确，只需填写卡片底部即可。

如何在数据视图卡中执行此操作？

我尝试过 width: 100% 但没有弄清楚。

Answer 1

将

margin: -2rem

添加到

.popular-background

。它将偏移其父级

.card

的填充，并填充卡片的整个底部区域。

.popular-background {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -2rem;
  margin-top: 20px;
}