CODEWITHSUNDEEP
htmlcssreactjs
Cate Daniel
Cate Daniel

Reputation: 744

react css root div full browser height

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 }

Upvotes: 7

Views: 13549

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

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!

Upvotes: 8

Related Questions