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

Question

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

我已经使用 dbc.Col 的 md 选项调整了宽度，并且在我调整浏览器大小时工作正常 window。

但是我在调整高度时遇到了问题。我想要下面的 Card(GRAPHS) 来填充可用的屏幕高度。我该怎么做？

我有一个回调，将 plotly 图重新调整到标签 my-graph。如果我使用图形高度属性，它将被固定并且不会调整大小。

来自dash/plotly的默认高度使图形变矮了。

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

GRAPHS = [
    dbc.CardHeader(html.H5('header')),
    dbc.CardBody([dcc.Graph(id='my-graph')])
]

app = dash.Dash(__name__)

app.layout = html.Div([
    dbc.Container([
            dbc.Row([html.H1('title')]),
            dbc.Row([
                dbc.Col([dbc.Card(LEFT_MENU)]),
                dbc.Col([dbc.Card(GRAPHS)])  # How to make this fill screen height?
])])])

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)
                ]) 
            ])
    ])

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

How to make a Card fill screen height?

python

plotly-dash