react css root div full browser height

user_2352742 0
Viewed 8043

I can't seem to get the react root div to fill the browser page. The root div only takes up what it needs

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 }
reactjs css html
1 Answers

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!

user_50596570
Related