我创建了一个非常简单的dash应用程序,但是我不能让主div扩展到整个页面的高度.

以下是python代码

import dash
from dash import html


app = dash.Dash(__name__)
page = html.Div(id='page',
                children=[html.H1('hello')],
                style={'background-color': 'orange', 'height': '100%', 'width': '100%'},
                className='flex-grow-1')

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

app.run_server()

下面是低于assets/custom.css的css代码

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.full-screen-div {
    width: 100vw;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
}

The page looks as shown below - I would like the orange background to stretch to fill the browser window. I have tried setting height with the viewport height parameter, but that doesn't translate well between screen sizes. I have also tried setting position: fixed, but that gives some overflow when introducing figures. enter image description here

推荐答案

还有<div>个需要扩展,请将您的第一个css块更改为包含#react-entry-point个:

body, html, #react-entry-point {
    height: 100%;
    width: 100%;
    margin: 0;
}

Result: enter image description here

顶部的白色间距是由于<h1>上的margin,如果你想删除它,考虑resetting browser styling或添加以下内容:

h1 {
    margin: 0;
}

Result: enter image description here

Python相关问答推荐

仅使用2种 colored颜色 创建热图

Pandas使用过滤器映射多列

如何在Pygame中绘制右对齐的文本?

避免循环的最佳方法

pyramid 内部数组中的连续序列-两极

不允许AMBIMA API请求方法

仅从风格中获取 colored颜色 循环

Python 3.12中的通用[T]类方法隐式类型检索

难以在Manim中正确定位对象

Python上的Instagram API:缺少client_id参数"

如何避免Chained when/then分配中的Mypy不兼容类型警告?

使用miniconda创建环境的问题

使可滚动框架在tkinter环境中看起来自然

C#使用程序从Python中执行Exec文件

在vscode上使用Python虚拟环境时((env))

在Python中,从给定范围内的数组中提取索引组列表的更有效方法

未知依赖项pin—1阻止conda安装""

python中的解释会在后台调用函数吗?

用砂箱开发Web统计分析

交替字符串位置的正则表达式