CSS Grid布局异常：main无法将footer推至页面底部且高度不足

核心问题分析 #

你遇到的问题根源有两个：

• 使用height:100%设置容器高度时，若内容不足视口，容器不会自动扩展到视口高度；若内容超出视口，容器高度也不会随内容延伸。
• grid-template-rows: auto 6.1rem里的auto仅会根据main的内容高度分配空间，无法让main填充剩余视口空间，自然无法将footer推到底部。

修复方案 #

直接调整两个关键设置：

1. 替换容器高度属性

将html和body的height:100%改为min-height:100vh，同时移除body的默认边距：

html, body {
  min-height: 100vh; /* 至少占满视口高度，内容超出时自动适配 */
  margin: 0; /* 消除默认边距，避免不必要的滚动条 */
}

2. 调整Grid行分配规则

把grid-template-rows里的auto换成1fr，让main占据除footer固定高度外的所有剩余空间：

body {
  display: grid;
  grid-template-rows: 1fr 6.1rem; /* 1fr弹性填充剩余空间 */
}

完整示例代码 #

/* 基础重置与容器设置 */
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-rows: 1fr 6.1rem;
}

/* 主内容区样式（可选） */
main {
  background-color: #f5f5f5;
  padding: 2rem;
}

/* 页脚样式 */
footer {
  height: 6.1rem;
  background-color: #2d3748;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Footer Fix Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <!-- 这里放入你的主内容 -->
    <p>测试内容：不管这里内容多少，footer都会固定在底部</p>
  </main>
  <footer>
    这是页脚内容
  </footer>
</body>
</html>

为什么这样有效？ #

• min-height:100vh：vh是视口高度单位，100vh等于整个浏览器视口高度，min-height确保容器高度至少等于视口，内容超过视口时自动拉长，避免了height:100%的局限性。
• 1fr：在Grid布局中，fr是“分数单位”，会自动分配容器的剩余空间。这里1fr让main占满footer之外的所有可用空间，无论main内容多少，都能把footer推到容器最底部。

内容的提问来源于stack exchange，提问作者J.Tran