如何调整Django中Dash容器（白色区域）的高度？

问题背景 #

在Django中集成Plotly Dash后，调整外层白色Dash容器高度时遇到问题：修改dcc.Graph样式、测试min-height/max-height属性，仅能放大容器内的图表，无法改变外层白色容器的高度。

用户原始代码如下：

analytics.html #

{% extends 'frontend/base.html' %}
{% load plotly_dash %}

{% block content %}
    <h2>Reports and Analytics</h2>
    <div id="dash-container" style="width: 100%; height: 1200px; overflow: hidden;">  <!-- Adjust container height here -->
        {% plotly_app name="Analytics" %}
    </div>
{% endblock %}

analytics_dash.py #

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from django_plotly_dash import DjangoDash
from .models import UserAction
from django.db.models import Count

# Create a Django Dash application
app = DjangoDash('Analytics')

def load_data():
    actions = UserAction.objects.values('action_type').annotate(count=Count('id'))
    return [action['action_type'] for action in actions], [action['count'] for action in actions]

# Define the layout of the Dash app
app.layout = html.Div([
    dcc.Graph(
        id='user-action-graph',
        style={'width': '100%', 'height': '100%'}  # Use 100% to fill container
    )
], style={'width': '100%', 'height': '1200px'})  # Adjust to match container size

@app.callback(
    Output('user-action-graph', 'figure'),
    [Input('user-action-graph', 'id')]
)
def update_graph(_):
    action_types, counts = load_data()

    fig = go.Figure()

    if not action_types or not counts:
        fig.add_annotation(text="No Activity Data Available Yet", showarrow=False)
    else:
        fig.add_trace(go.Bar(
            x=action_types, 
            y=counts, 
            marker=dict(color='royalblue', line=dict(color='black', width=1))
        ))

    max_count = max(counts) if counts else 5

    fig.update_layout(
        title='User Activities',
        xaxis_title='Action Type',
        yaxis_title='Count',
        yaxis=dict(range=[0, max_count + 2]),
        margin=dict(l=40, r=40, b=40, t=40),
        height=1000,  # Match height with container
    )

    return fig

解决方案 #

1. 直接给plotly_app标签传递样式参数 #

django-plotly-dash的plotly_app模板标签支持直接传入style属性，让Dash应用直接继承指定高度，无需依赖外层div的样式传递：

修改后的analytics.html：

{% extends 'frontend/base.html' %}
{% load plotly_dash %}

{% block content %}
    <h2>Reports and Analytics</h2>
    {% plotly_app name="Analytics" style="width: 100%; height: 1200px; overflow: hidden;" %}
{% endblock %}

若需保留外层div，确保给plotly_app传递100%高度，让它完全填充父容器：

{% extends 'frontend/base.html' %}
{% load plotly_dash %}

{% block content %}
    <h2>Reports and Analytics</h2>
    <div id="dash-container" style="width: 100%; height: 1200px; overflow: hidden;">
        {% plotly_app name="Analytics" style="width: 100%; height: 100%;" %}
    </div>
{% endblock %}

2. 移除Dash布局和Figure中的固定高度设置 #

将Dash应用布局中的固定高度改为100%，同时移除Figure布局里的固定高度，让图表和外层容器完全自适应：

修改后的analytics_dash.py关键部分：

# 修改Dash布局样式，使用100%高度自适应父容器
app.layout = html.Div([
    dcc.Graph(
        id='user-action-graph',
        style={'width': '100%', 'height': '100%'}
    )
], style={'width': '100%', 'height': '100%'})  # 去掉固定高度，改为100%

# 回调函数中移除fig.update_layout里的height设置
fig.update_layout(
    title='User Activities',
    xaxis_title='Action Type',
    yaxis_title='Count',
    yaxis=dict(range=[0, max_count + 2]),
    margin=dict(l=40, r=40, b=40, t=40),
    # 移除height:1000这一行
)

3. 用CSS强制覆盖默认样式（可选） #

若上述方法仍未生效，添加自定义CSS覆盖django-plotly-dash生成的外层容器默认样式：
在base.html的<head>中加入：

<style>
.django-plotly-dash-app {
    height: 100% !important;
    width: 100% !important;
}
</style>

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