使用带有 React 根 div 的 CSS 网格答案

【问题标题】：Using css grid with React root div使用带有 React 根 div 的 CSS 网格
【发布时间】：2021-08-25 03:30:18
【问题描述】：

我是一个新手，所以请多多包涵，我正在尝试创建一个 CSS 网格，其中包含页眉、主要内容和页脚。我试图将主要内容设置为自动但是我认为根 div 只有其内容的高度而不是整个网页所以我尝试了：

#root{
  height:100%;
}

但还是不行。

```
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;
}
```

【问题讨论】：

标签： html css reactjs

【解决方案1】：

它没有覆盖整个高度，因为高度是基于我们在 div 中的内容，如果我们想强制中间部分占据页面的大部分空间，我们必须给它的父级一个我给的高度，我还添加了 1fr 而不是 auto，您可以在下面的链接中了解它，如果您想了解网格属性，请查看这些链接。 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>

【讨论】：

【解决方案2】：

这是因为#root {height:100%} 只会使#root 成为父元素的100%，在本例中为body，它没有固有高度.所以你必须先设置body 填充视口，然后你的#root 将填充主体。

但是，您的内容最终可能会高于视口，因此在 body 元素上使用 min-height 而不是 height 是更安全的选择。

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

#root {
  height: 100%
}

【讨论】：