在破折号中做一个窗口大小的div

Question

我正在尝试用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;
}

Answer 1

您可以使用vw和vh

vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

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

所以你可以这样做：

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