title: Making a div the size of window in Dash
body: <p>I'm trying to build a website using Dash. Now I'm facing problems while making the layout using a css file I made. I wanted to make a container (a div) as large as the window (100% height, 100% width), but for some reason it won't work.</p>
  <p>I have set all parent elements (html, body) to <code>height: 100%; width: 100%</code>, but when I make a border around the first div, it's really small and has 0 height, but 100% width.</p>
  <p>I thought, maybe there is a parent div or some other parent element I haven't seen so far, that I haven't made as high as the window. Maybe someone knows if there is a element I have to set to full height. I also don't know, if the <code>html</code> and <code>body</code> selector works, because I don't see any <code>html</code> or <code>body</code> in the Dash app.</p>
  <p>I have a multi-page-app, so there is my index.py:</p>
  <pre><code>import dash_html_components as html
  from dash.dependencies import Input, Output
  
  from app import app
  from apps import home, about
  
  app.title = &quot;Wetter&quot;
  app.layout = html.Div([
      dcc.Location(id='url', refresh=False),
      html.Div(id='page-content', className=&quot;all&quot;)
  ], className=&quot;all&quot;)
  
  
  @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)
  </code></pre>
  <p>My home app:</p>
  <pre><code>layout = html.Div(
      children=[
          # ------------- First part -------------
          html.Div(
              children=[
                  # ------------- Title on left side -------------
                  html.Div(
                      children=[
                          html.H1(children=&quot;Wetter&quot;, className=&quot;header_title&quot;),
                          html.P(
                              children=&quot;some text&quot;,
                              className=&quot;header_description&quot;,
                          ),
                      ],
                      className=&quot;header&quot;,
                  ),
  
                  &quot;&quot;&quot; some other code following &quot;&quot;&quot;
  
              ],
              className=&quot;upper_part&quot;
          ),
      ],
      className=&quot;all&quot;,
  )
  </code></pre>
  <p>The start of my css file:</p>
  <pre><code>* {
    box-sizing: border-box;
  }
  
  html, body {
      font-family: &quot;Lato&quot;, 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;
  }
  </code></pre>