如何根据同级元素的高度设置固定高度

Question

假设我有两个同级元素A和B。我想将B的高度设置为固定（容器的高度-A的高度）。因此，B的子元素不会增加B的高度。

我尝试使用Height：100％;，但这不是容器的高度（容器的高度-A的高度）

示例角度应用程序： https://stackblitz.com/edit/angular-ivopeh

B的高度应固定为（容器的高度-A的高度）=（50px -30px）= 20px。因此，如果B的子元素的高度大于20px，则应将其高度限制为20px，并向其中添加滚动条

Answer 1

如果可以的话，我将其作为评论。

要在子节大于20px时在b节中添加滚动条，可以在b节中overflow-y:scroll（有关溢出的更多文档，请参见下文）。这样，您只需要注意可以通过添加flexbox或固定值即可解决的高度。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 2

如果A具有固定的高度，则应按以下步骤更改B类；

.B {
  display: block;
  height: calc(100% - 20px /* A's fixed height. can be percentage, pixel, em, rem etc. */);
  overflow-y: auto;
}

要使B上设置的任何display: block;值有效，都必须

height。

overflow-y: auto必须显示滚动条，以防B的内容溢出。

这是一个有效的演示：https://stackblitz.com/edit/angular-mw3ugb