CSS Grid高度无法随内容自适应 滚动时背景色显示异常

问题表现 #

• 个人网站布局从旧table方案切换为CSS Grid实现三列结构：左右两列各占15%宽度作为黑色边距区，中间列占70%宽度作为深灰色内容承载区
• 页面内容总高度超出视口触发纵向滚动时，三列高度不会随内容自动延伸，滚动到底部会露出网格容器设置的米白色#fceee3背景，该效果不属于预期设计
• 问题截图：
  • 滚动到中部效果：
  • 滚动到底部效果：

问题根源 #

• 高度规则冲突+无效属性：
  1. body被强制设置height: 100vh，高度被锁死为视口高度，超出视口的内容不参与body高度计算
  2. 内联样式中写的min-height: 100#是非法CSS值，浏览器直接忽略该规则
  3. 网格容器.wrapper设置height: 100%，父级body高度锁死为100vh的前提下，容器高度也被限制为视口高度，无法随内容撑开
• 布局属性冗余：容器上多余的overflow: scroll设置干扰了正常文档流高度计算
• 固定导航没有预留占位空间，顶部内容会被导航遮挡

修复步骤 #

1. 把body上的height: 100vh替换为min-height: 100vh，保证内容不足时占满视口，内容超出时自动随内容增高
2. 删除所有无效的min-height: 100#写法，移除网格容器上多余的height: 100%、overflow: scroll属性，给容器设置min-height: 100vh
3. 给网格容器增加和导航高度一致的顶部内边距，避免内容被固定定位的导航遮挡
4. 不需要给网格子项（左右边距列、中间内容列）设置固定高度，CSS Grid默认的align-items: stretch规则会自动让所有列高度和最高列保持一致，自动适配内容高度
5. 直接移除网格容器上的米白色背景设置，从根源避免漏色可能

修复后完整核心代码 #

body {
    margin: 0;
    width: 100vw;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: dodgerblue;
}

p {
    color: #45d163;
    font-size: 3.0vh;
    text-align: left;
    margin-left: 2.5vw;
    font-weight: bold;
}

ol {
    margin-left: 3.5vw;
}

.header {
  overflow: hidden;
  background-color: #171615;
  padding: 1% 1%;
  width: 100%;
  position: fixed;
  height: 7%;
  top: 0;
  z-index: 99;
}

.header a {
  float: left;
  color: #f1f1f1;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
  width: max-content !important;
  margin-right: 10px;
}

.header a.active {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
}

.header a.logo {
  all: unset;
}

.login {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header-right {
  float: right;
}

.wrapper {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  width: 100vw;
  min-height: 100vh;
  padding-top: 7vh;
}

.grid-item {
  background-color: #000000;
  color: #f1f1f1;
}

.grid-center {
  background-color: #252525;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Keyboard Mechanic</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>  
    <div class="header">
        <a href="newLook.html" class="logo"> <img src="images/cornerlogo.png" height="50px"> </a>
        <div class="header-right">
        <a class="active" href="newLook.html">Home</a>
        <a class="active" href="games.html">Games</a>
        <a class="active" href="webprojects.html">Web Projects</a>
        <a class="login"  href="login.html">Login</a>
        <a href="contact.html">Contact</a>
        <a href="about.html" style="margin-right: 2vw;">About</a>
        </div>
     </div>

    <div class="wrapper"> 
      <div class="grid-item"></div>
      
      <div class="grid-center"> 
          <p>Hello </p>
          <img style="width: 100%;" src="https://i.imgur.com/DvlV8Sh.png" />
          <p>修复后三列会自动跟随内容高度拉伸，全程保持边距纯黑、内容区深灰，无米白色漏出问题</p>
      </div>
      
      <div class="grid-item"></div>
    
    </div>
  
</body>
</html>

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