Angular 12 个扩展面板并保持总高度固定在 100 vh

Question

我对网站布局有疑问。无论由 Angular Expansion Panel（我使用的是 angular 12）组成的 B 部分是展开还是折叠，我都希望将总高度保持在 100vh。这样，C 部分可能会有一个滚动条（我认为应该是）。然而，尽管C部分给出了overflow-y:auto，但最终的结果并没有达到我的预期。有人可以帮我解决这个问题吗？

picture to show

sample code to show on StackBlitz

Answer 1

您可以利用 flex 功能来满足要求：

.section {
  ...
  display: flex;
  flex-direction: column;
}

.section-C {
  // height: 800px; <-- remove this
  flex: 1;
  overflow-y: auto;
}

Forked Stackblitz

Angular 12 个扩展面板并保持总高度固定在 100 vh

Angular 12 Expansion Panel and keep total height fix at 100 vh

html

javascript

css

expansion

angular