Question

我有以下情况：我想根据Div3的内容调整Div2的高度，并根据Div2上的内容调整Div3的高度。 Div1的高度为500px并固定。

我有以下疑问：

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

+-------------+
|  DIV1(500px)|
|  +-------+  |
|  |       |  |
|  |  DIV2 |  |
|  |       |  |
|  |       |  |
|  +-------+  |
|  +-------+  |
|  |       |  |
|  |  DIV3 |  |
|  |       |  |
|  |       |  |
|  |       |  |
|  |       |  |
|  +-------+  |
+-------------+

Answer 1

你必须决定Div2的高度是否应该基于Div3的高度，反之亦然。他们不能互相依赖＆＃39;高度，因为这个方程组有无限的解决方案：

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的样式。

Working Fiddle

Answer 2

用css描述的内容是不可能的。您可以使用javascript手动完成，但我建议您查看Grid stylesheets。在ccss中，规则是

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

1 div的高度取决于其他div的高度？

2 个答案: