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;
}

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

1 个答案: