无需额外容器，为多个Grid元素添加统一边框的实现方案

我来帮你搞定这个Grid布局的需求，你的核心目标是在不新增额外容器的前提下，给Header、Main、Footer三个元素加上统一边框，同时保证整体居中且Main内容能自适应高度。咱们先看看现有代码的问题，再给出调整方案：

现有代码的核心问题 #

你给html和body设置了height: 100%，这会把body的高度固定在当前视口高度——一旦Main里的内容超过视口高度，内容会溢出，但边框不会跟着撑开，这就不符合自适应高度的要求了。另外，给html设置Grid布局其实是多余的，反而增加了层级复杂度。

修正后的解决方案 #

下面是调整后的代码，完全满足你的所有需求和限制条件：

CSS代码 #

/* 全局样式重置，消除浏览器默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 让body至少占满视口高度，内容超出时自动增高 */
  min-height: 100vh;
  /* 水平居中布局 */
  margin: 0 auto;
  width: 50%;
  /* 统一边框，无需使用单边边框属性 */
  border: solid 5px black;
  /* 直接将body设为Grid容器 */
  display: grid;
  grid-template-rows: 50px auto 50px; /* Header/Footer固定高度，Main自适应 */
  grid-template-columns: 1fr;
}

header { background-color: #0000b7;}
main { background-color: blue;}
footer { background-color: lightblue;}

HTML代码（可在Main中添加测试内容验证效果） #

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home Page</title>
  <style>
    <!-- 上面的CSS代码放在这里 -->
  </style>
</head>
<body>
  <header></header>
  <main>
    <!-- 可添加大量测试内容验证自适应效果 -->
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
    <p>测试内容行</p>
  </main>
  <footer></footer>
</body>
</html>

关键要点解释 #

• min-height: 100vh：这是解决自适应高度的核心——它让body至少占满整个视口高度，当Main内容增多时，body会自动被撑开，边框也会跟着延伸，不会出现内容溢出边框的情况。
• margin: 0 auto：直接让body这个块级元素在页面水平居中，比用Grid的place-self更简洁高效。
• 直接在body上应用Grid布局：不需要额外嵌套容器，完美符合你的限制条件；给body加边框，一次性给三个子元素套上统一边框，完全不需要使用border-top这类单边属性。
• 全局样式重置：用*选择器重置默认的margin和padding，避免浏览器自带样式干扰布局，同时box-sizing: border-box确保边框不会额外增加元素宽度。

你可以测试一下，不管Main里内容多少，边框都会完整包裹所有元素，整体始终居中，完全满足你的需求。

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