如何让Dash应用中的主Div铺满页面全屏高度？

我创建了一个简单的Dash应用，但主Div无法拉伸至页面全屏高度，橙色背景仅包裹内容区域，无法铺满浏览器窗口。尝试过视口高度参数（不同屏幕尺寸下表现不稳定）和position: fixed（添加图表后会出现溢出问题），均未解决。

修改后的Python代码 #

import dash
from dash import html

app = dash.Dash(__name__)
page = html.Div(
    id='page',
    children=[html.H1('hello')],
    style={'background-color': 'orange'}
)

app.layout = html.Div(
    page,
    className='full-screen-div'
)

app.run_server()

修改后的assets/custom.css代码 #

body, html {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

.full-screen-div {
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
}

#page {
    height: 100%;
    width: 100%;
}

关键调整说明 #

• 将body和html的高度设为100vh（视口高度）、宽度设为100vw（视口宽度），同时清除默认的margin和padding，确保根元素完全占满屏幕。
• 外层容器.full-screen-div直接使用100vh和100vw定义尺寸，避免百分比高度依赖父元素的层级问题。
• 内部#page通过height: 100%和width: 100%继承外层容器的尺寸，让橙色背景铺满整个屏幕。
• 移除原代码中未生效的flex-grow-1类，避免不必要的布局干扰。

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