Javascript 1个分区的高度取决于其他分区的高度？

我有以下场景：我希望Div2的高度根据Div3的内容调整大小，Div3的高度根据Div2的内容调整大小。Div1的高度为500px，并且是固定的

我有以下疑问：

• 这样做是否明智，因为它需要根据内容计算高度
• 我们可以使用CSS吗

---

您所描述的内容在css中是不可能实现的。你可以用javascript手工完成，但我建议你看看。在ccss中，规则是

#div2[height] + #div3[height] = 500

---

您必须决定Div2的高度是否应基于Div3的高度，反之亦然。它们不能基于彼此的高度，因为这个方程组有无限的解：

x = 500 - y
y = 500 - x

这是一个灵活的解决方案，其中

D3

基于

D2

的高度：

#D1 {
  height: 500px;
  display: flex;
  flex-direction: column;
}

#D2 {
  overflow: auto;
}

#D3 {
  flex: 1;
  overflow: auto;
}

如果

D2

应基于

D3

的高度，则移动

flex:1到
D2
的样式

如果DIV2或DIV3内容高度超过500px怎么办？请尝试使用“视口高度”。它还有助于控制其他div的大小。@ozil：我们必须在每个div（div2，div3）中获得滚动条。如果两个分区都有更多的数据，那么两个分区都应该使用滚动条来获取相同的高度。您需要检查每个分区的内容获取的高度，比较它们并相应地为每个分区分配高度
#D1 {
  height: 500px;
  display: flex;
  flex-direction: column;
}

#D2 {
  overflow: auto;
}

#D3 {
  flex: 1;
  overflow: auto;
}