获取图形来填充父容器的高度

Question

我正在使用 Flexbox 创建 Dash 布局。它们非常有用。但是，我在调整图表大小以填充与破折号卡相等的空间时遇到问题，因为我不知道图表/卡片/行元素的默认大小。这就造成了如下情况：

右侧的两个图表应各为高度的一半，但我不确定其父图表的行高，因为这是由 Dash 在仪表板的其他区域自动设置的。

虽然我可以手动设置它[以及仪表板中的所有行]，但我很确定默认值是响应式的。所以，在我这样做之前，我很好奇是否有人知道：

• Dash 中卡片、图表或行的默认行高？
• 使用CSS推断高度的方法？

本质上，如何确保两个堆叠图的高度与其父容器的高度相同。

提前致谢。

Answer 1

已解决：必须明确说明图形的高度。这非常重要。可以通过以下方式之一完成：

1. 更新 dcc.Graph 对象的样式，即 dcc.Graph(style={"height": 600px},figure=...}
2. 更改 update_layout() 中的高度属性。

您还可以创建一个 CSS 类来更新样式。在上面的例子中，我将左图的高度设置为 600px，将左图的高度设置为 285px，这样它们的高度 + 边距和填充的两倍 = 左图的高度。