Dash布局中如何让堆叠图表填充父容器高度？

一、Dash组件默认尺寸说明 #

• Row组件：无固定默认高度，高度由内部子元素总高度决定，同时会继承父容器的可用空间，属于内容驱动型高度。
• Card组件：默认高度由内部内容撑开，无预设固定值；Card Body默认带有内边距，但不改变高度的计算逻辑。
• Graph组件：默认高度为450px，继承自Plotly图表的默认配置。

二、用CSS推断元素高度的方法 #

• 浏览器开发者工具查看：右键点击目标元素（如Card、Row）选择「检查」，在Elements面板的「Computed」标签下可查看元素实际计算后的高度（包含height、min-height等属性值）。
• CSS布局规则适配：
  • 若父容器为Flex布局，给父元素设置display: flex; flex-direction: column; height: 100%;，让子元素继承高度空间。
  • 自定义类名+CSS计算：给目标Card添加类名full-height-card，然后编写CSS：

    .full-height-card {
      height: 100%;
    }
    .full-height-card .dash-graph {
      height: calc(50% - 8px); /* 减去内边距或间距的影响 */
    }
    

  • 利用Flex的flex-grow属性：给子元素设置flex: 1，无需手动计算高度，自动平分父容器可用空间。

三、堆叠图表填满父容器的实现方案 #

无需硬编码高度，直接通过Flex布局特性实现响应式适配：

1. 给包含两个Graph的父Row设置Flex垂直布局并占满高度：

   dbc.Row(
       [
           dbc.Col(dcc.Graph(figure=fig1)),
           dbc.Col(dcc.Graph(figure=fig2))
       ],
       style={"display": "flex", "flexDirection": "column", "height": "100%", "gap": "8px"}
   )
   

2. 给每个Graph组件添加flex: 1属性，自动平分父容器高度：

   dcc.Graph(
       figure=fig,
       style={"flex": 1, "width": "100%"}
   )
   

3. 确保上层的Card和父级Row都设置height: 100%，让高度逐层传递：

   dbc.Card(
       dbc.CardBody(
           # 上述包含Graph的Row
       ),
       style={"height": "100%"}
   )
   

内容的提问来源于stack exchange，提问作者plotmaster473