如何管理多个 div 的高度，每个 div 的高度取决于另一个？ [关闭]

Question

https://stackblitz.com/edit/angular-z32zec，此时容器区域的高度是自适应屏幕高度的。标题区域总是在容器的顶部，它的高度是未知的。底部区域总是在容器的底部，但它的高度是一个常数。内容区域高度取决于页眉区域，因此如果三个区域的总高度小于屏幕高度，则可能会出现空白。当标题区域高度增加时，内容区域高度减小。比意味着底部区域高度和总高度永远不会改变。 我想知道是否有人知道如何实现这一目标？

Answer 1

根据您的 stackblitz 演示，我认为这就是您想要的（如果不是，请告诉我）：Stackbliz demo

<div class="container">

    <div class="header">
        This header area height is unknown, maybe increase or decrease. asdfasd
    </div>

    <div class="content">
        This content area height depends on 'header area' height. It may have blank if the sum height of three areas is smaller than
        the screen height. When header area height increase, this area height decrease.
    </div>

    <div class="bottom-div">
        This area is always in the bottom of the container, and the container's height is the screen's height. The bottom area's
        height is a constant.
    </div>

</div>

.container {
  display: flex;
  flex-direction:column;

  &>* {
    flex-shrink: 0;
  }

  border: 1px solid red;
  height: 100vh;
}


.header {
  margin: 5px;
  border: 1px solid black;
}

.content {
  flex: 1;
  margin: 10px;
  border: 1px solid black;
}

.bottom-div {
  margin: 10px;
  border: 1px solid gray;
}