Using css grid with React root div

Question

I am a bit of a newbie so bear with me, I am trying to create a CSS grid where I have a header, main content and a footer. I was trying to set the main content to auto however i think that the root div only has the height of its content and not the whole webpage so i tried:

#root{
  height:100%;
}

But it still does not work.

```
body{
  margin:0;
}
main{
  display:grid;
  grid-template-areas: 
  "header"
  "content"
  "footer";
  grid-template-rows: 50px auto 70px;
}
Header{
  grid-area:header;
  border:1px solid black;
}
Footer{
  grid-area:footer;
  border:1px solid black;
}
#contentMain{
  grid-area:content;
  border:1px solid black;
}
```

Shahil Mishra · Accepted Answer · 2021-08-24 19:30:18Z

It does not cover full height because, height is based on content we have inside div, if we want to force the middle section to take most of the space of the page we have to give its parent a height that I gave, I also added 1fr instead of auto you can learn about it in the below links, if you want to learn about grid properties please check these links. https://learncssgrid.com/ https://css-tricks.com/snippets/css/complete-guide-grid/

body{
  margin:0;
}
main{
  display:grid;
   grid-template-areas: 
  "header"
  "content"
  "footer";
  grid-template-rows: 50px 1fr 70px;
  height: 100vh;
}
Header{
  grid-area:header;
  border:1px solid black;
}
Footer{
  grid-area:footer;
  border:1px solid black;
}
#contentMain{
  grid-area:content;
  border:1px solid black;
}

<main>
  <header>ss</header>
  <div class="contentMain">dd</div>
  <footer>ee</footer>
</main>

Remy Smith · Accepted Answer · 2021-08-24 17:22:37Z

2

It's because #root {height:100%} will only cause #root to be 100% of the parent element, in this case, body, which has no inherent height. So you must first set body to fill the viewport, then your #root will fill the body.

However, your content may eventually be taller than the viewport, so using min-height instead of height on the body element is a safer option.

body {
  min-height: 100vh;
  margin: 0;
}

#root {
  height: 100%
}

answered Aug 24, 2021 at 17:22

Remy Smith

1264 bronze badges

Collectives™ on Stack Overflow

Using css grid with React root div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related