在 Dash 中制作一个与窗口大小相同的 div答案

【问题标题】：Making a div the size of window in Dash在 Dash 中制作一个与窗口大小相同的 div
【发布时间】：2021-03-14 11:08:12
【问题描述】：

我正在尝试使用 Dash 构建网站。现在我在使用我制作的 css 文件进行布局时遇到了问题。我想制作一个与窗口一样大的容器（一个 div）（100% 高度，100% 宽度），但由于某种原因它不起作用。

我已将所有父元素（html、body）设置为height: 100%; width: 100%，但是当我在第一个 div 周围制作边框时，它非常小，高度为 0，但宽度为 100%。

我想，也许有一个父 div 或其他一些我到目前为止还没有看到的父元素，我还没有把它做成窗口那么高。也许有人知道是否有一个元素我必须设置为全高。我也不知道html 和body 选择器是否有效，因为我在Dash 应用程序中看不到任何html 或body。

我有一个多页面应用程序，所以有我的 index.py：

import dash_html_components as html
from dash.dependencies import Input, Output

from app import app
from apps import home, about

app.title = "Wetter"
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content', className="all")
], className="all")


@app.callback(Output('page-content', 'children'),
              Input('url', 'pathname'))
def display_page(pathname):
    if pathname == '/home' or pathname == '/' or pathname == '/home/':
        return home.layout
    elif pathname == '/about' or pathname == '/about/':
        return about.layout
    else:
        return '404'


if __name__ == '__main__':
    app.run_server(debug=True)

我的家庭应用：

layout = html.Div(
    children=[
        # ------------- First part -------------
        html.Div(
            children=[
                # ------------- Title on left side -------------
                html.Div(
                    children=[
                        html.H1(children="Wetter", className="header_title"),
                        html.P(
                            children="some text",
                            className="header_description",
                        ),
                    ],
                    className="header",
                ),

                """ some other code following """

            ],
            className="upper_part"
        ),
    ],
    className="all",
)

我的 css 文件的开头：

* {
  box-sizing: border-box;
}

html, body {
    font-family: "Lato", sans-serif;
    margin: 0;
    background-color: #F7F7F7;
    width: 100%;
    height: 100%;
}

.all {
    height: 100%;
    width: 100%;
    margin: 0;
    border-style: solid;
}

/* ------------ First part of page ------------ */

.upper_part {
    background-color: #222222;
    height: 100%;
    width: 100%;
    verticalAlign: middle;
    textAlign: center;
    /*position: fixed;*/
    top: 0px;
    left: 0px;
}

/* ------------ Header ------------ */

.header {
    float:left;
    width: 50%;
    height: 50%;
    background-color: #222222;
    margin: 0;
    verticalAlign: middle;
}

.header_title {
    color: #FFFFFF;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    margin: 10px auto;
}

.header_description {
    color: #CFCFCF;
    margin: 4px auto;
    text-align: center;
    max-width: 384px;
}

【问题讨论】：

标签： python css plotly-dash

【解决方案1】：

您可以改用vw 和vh

vw 等于视口宽度的百分之一，这意味着如果您使用 vw 设置字体大小，它将始终与视口的大小相关。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

所以你可以这样做：

.all {
    height: 100vh;
    width: 100vw;
    margin: 0;
    border-style: solid;
}

【讨论】：