react css root div full browser height

Question

I can't seem to get the react root div to fill the browser page.

I've tried adding the following CSS, and just about every combination of

html, body {
    margin: 0;
    height: 100%;
}
.fill-height {
    min-height: 100%;
    height:auto !important; /* cross-browser */
    height: 100%; /* cross-browser */
}

#root > [data-reactroot] { height: 100vh }

Answer 1

You should be able to achieve this by setting height to 100% or 100vh of #root instead of #root > [data-reactroot]. This does depend on the rendered structure of your application. You may also need to set the height on multiple elements depending on how nested things are:

#root {
  height: 100vh;
}

Here is a StackBlitz showing the functionality in action. You may need to fork it and update it to match more with the structure of your application, but it may be the only issue is you are targetting a child of #root instead of just #root.

Hopefully that helps!