如何在Dash（Python）中调整Div组件的高度？

嘿，我明白你遇到的问题了——给div_g设置height: 200%完全没反应，但改宽度却能生效，还想让它和div_xy高度保持一致，对吧？这其实是CSS里的常见小坑，咱们一步步来解决它。

为什么百分比高度不生效？ #

CSS里的百分比高度是基于父元素的明确高度计算的。你的div_main用了display: flex，但它本身没有设置固定高度，子元素的百分比高度找不到参考基准，自然就不起作用了。而宽度能生效是因为flex容器默认会给子元素分配可用的宽度空间，不需要额外的参考值。

解决方案1：利用Flex布局自动让两个Div等高（推荐） #

既然你已经用了flex布局，那咱们直接利用它的特性来实现等高，这比手动设置百分比要简单可靠得多：

1. 给父容器div_main设置明确的高度（比如用100vh让它占满整个浏览器视口高度），同时确保flex的对齐方式是默认的stretch（这个其实是flex的默认值，加上更保险）。
2. 去掉div_g里的height设置，flex会自动让它和div_xy高度一致。

修改后的关键代码片段：

# 修改div_main的样式
div_main = html.Div(
    [div_xy, div_g],
    style={"display": "flex", "align-items": "stretch", "height": "100vh"}
)

# 修改div_g的样式，去掉无效的height设置
div_g = html.Div(
    [g_scatter],
    id="change-height",
    style={'width': '49%', 'display': 'inline-block'}
)

如果想让里面的 scatter 图表填满div_g的高度，还可以给g_scatter加上高度样式：

g_scatter = dcc.Graph(
    id='crossfilter-indicator-scatter',
    hoverData={'points': [{'customdata': 'Japan'}]},
    style={"height": "100%"}
)

解决方案2：手动设置百分比高度（需要给所有父元素加高度） #

如果你一定要用百分比来控制高度，那得给从最外层到目标Div的所有父容器都设置明确的高度：

1. 给最外层的布局Div设置高度：

app.layout = html.Div(
    [div_dd, div_main],
    style={"height": "100vh", "margin": 0, "padding": 0}
)

2. 给div_main设置height: 100%：

div_main = html.Div(
    [div_xy, div_g],
    style={"display": "flex", "height": "100%"}
)

3. 给div_g设置height: 100%：

div_g = html.Div(
    [g_scatter],
    id="change-height",
    style={'width': '49%', 'display': 'inline-block', 'height': '100%'}
)

这样所有层级都有了明确的高度参考，百分比设置就能生效了。

总结 #

最省心的方法还是用flex布局的自动等高特性，既不用纠结百分比的参考问题，又能完美实现两个Div高度一致的需求。

备注：内容来源于stack exchange，提问作者olli