如何用CSS Grid实现全屏布局，解决内容为空时Footer上移问题

你遇到的问题核心是布局容器的高度没有正确占满视口，导致当Body为空时，整个Grid容器高度不足，Footer无法固定在页面底部。以下是具体的修复方案：

1. 给React根容器设置高度 #

React挂载的#root元素需要明确占满视口高度，修改index.css：

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

#root {
  min-height: 100vh; /* 添加这一行 */
}

2. 调整Grid容器的高度设置 #

把.app的min-height: 100%改为min-height: 100vh，确保Grid布局强制占满整个视口：

.app {
  display: grid;
  min-height: 100vh; /* 替换原来的100% */
  grid-template-rows: 100px auto 100px;
}

3. 可选：移除多余的sticky定位 #

你的需求是Header固定在顶部、Footer固定在底部，CSS Grid本身已经通过grid-template-rows实现了这个效果，position: sticky属于多余设置（如果不需要滚动时保持固定的话），可以移除：

.header {
  background-color: aqua;
  /* 移除 position: sticky; top: 0; */
}

.body {
  background-color: rgb(1, 12, 12);
  color: aliceblue;
}

.footer {
  background-color: rgb(235, 181, 4);
  /* 移除 position: sticky; bottom: 0; */
}

为什么这样修改？ #

• 当#root和.app都设置min-height:100vh后，整个布局容器会至少占满视口高度，无论Body是否有内容，grid-template-rows中的auto行都会自动填充Header和Footer之间的剩余空间，Footer自然会贴在页面底部。
• 之前用min-height:100%时，由于#root没有明确高度，.app的百分比高度无法继承视口高度，导致容器高度仅由内部元素撑开，Body为空时就会出现底部空白。

内容的提问来源于stack exchange，提问作者fathi93