如何使卡片填满屏幕高度？

Question

使用dash创建一个简单的应用程序，以左侧菜单和绘图作为主要输出。

我已经使用md的{​​{1}}选项调整了宽度，并且在调整浏览器窗口大小时可以正常工作。

但是我在调​​整高度时遇到问题。我希望下面的dbc.Col填充可用的屏幕高度。我该怎么做？

我有一个回调，将Card(GRAPHS)图形重新调整为标签plotly。如果我使用图形高度属性，它将被固定并且不会调整大小。

来自my-graph / dash的默认高度使图形变短。

plotly

Answer 1

也许有更多使用dash经验的人可以为您提供更好的答案，但是我认为您可以使用关键字style为卡设置特定的垂直尺寸。然后，您可以传递带有CSS样式表参数的字典，在这种情况下，我们要更改高度{'height':'100vh'}。我会尝试的：

app.layout = html.Div([
    dbc.Container([
            dbc.Row([html.H1('title')]),
            dbc.Row([
                dbc.Col([dbc.Card(LEFT_MENU, style={'height':'100vh'})]),
                dbc.Col([dbc.Card(GRAPHS, style={'height':'100vh'})])  
])])])

您可以尝试使用不同的vh值来查看最合适的

或者，您也可以按照documentation中的说明将卡片放入CardGroup中。那应该强制所有卡具有相同的高度：

app.layout = html.Div([
    dbc.Container([
            dbc.Row([html.H1('title')]),
            dbc.Row([
                dbc.CardGroup([
                    dbc.Card(LEFT_MENU),
                    dbc.Card(GRAPHS)
                ]) 
            ])
    ])