React NextJS CSS - 部分的高度设置为父高度的 100%，但给出页面高度的 100%答案

【问题标题】：React NextJS CSS - Section's height is set to 100% of parent height, but gives 100% of page heightReact NextJS CSS - 部分的高度设置为父高度的 100%，但给出页面高度的 100%
【发布时间】：2021-07-13 01:19:55
【问题描述】：

我在将项目转移到 NextJS 时遇到问题（之前使用的是 Create-React-App）。

由于某种原因，在 NextJS 中，当我将部分的高度设置为 100% 时，它作为总页面高度的 100% 并且不考虑页眉和页脚。我这样做是因为我希望内容的最小高度完美契合，因此页脚始终与屏幕底部对齐。这是正在发生的事情的图片： section

如您所见，该部分占据了 100% 的页面，而导航栏的高度至少为 5rem，页脚的高度至少为 20rem。

这是 HTML 结构： HTML structure

如您所见，Navbar、Section 和 footer 都在同一个 div ("__next") 下，其高度也设置为 100%。

我似乎无法弄清楚发生了什么以及为什么该部分是视口高度的 100% 而不是可用空间。

任何帮助将不胜感激！

代码参考：

/* Setting the height of all direct children of body (the __next div) */
body > div {
  height: 100%;
}

/* Setting the height of the section */
section {
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;
}

【问题讨论】：

标签： css reactjs next.js

【解决方案1】：

通过添加以下内容以将 div 的高度以及显示设置为 flex 和向列的方向进行修复：

#__next {
  height: 100%;

  display: flex;
  flex-direction: column;
}

然后我简单地删除了这段代码：

body > div {
  height: 100%;
}

【讨论】：