CSS Grid三列布局侧边栏高度不随内容自适应问题求助

两类布局异常都是高度规则冲突、网格轨道计算逻辑错误导致的：

• 你给body、冗余的.grid-container类硬编码了height: 100vh，这个值仅等于浏览器可视窗口高度，不会随页面内容拉长，左右边距栏高度被该固定值锁死，滚动到视口范围外自然会截断
• 网格列定义混用了auto和fit-content(70%)，没有给网格轨道明确的尺寸约束，长图作为替换元素默认按原生分辨率渲染，会溢出网格区域
• 存在重复样式冲突：你同时定义了.grid-container和.wrapper两套网格容器规则，后写的.wrapper样式会覆盖前序规则，部分高度属性相互抵消失效

直接删除冲突的固定高度、冗余样式，调整网格计算规则即可：

• 移除所有普通文档流元素上硬编码的height: 100vh，改用min-height: 100vh保证容器最短撑满一屏，内容超长时自动适配高度
• 网格列改成固定比例15% 70% 15%，去掉容易导致计算异常的fit-content、auto混合写法，利用Grid原生的同行等高特性，让左右边栏自动和中间内容区高度保持一致
• 给长图添加display: block; width: 100%; height: auto规则，避免行内元素默认间隙、原生尺寸导致的溢出问题
• 清理未使用的冗余类样式，固定头部对应添加顶部内边距，避免内容被导航栏遮挡

CSS 代码 #

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

.header {
  overflow: hidden;
  background-color: #171615;
  padding: 1% 1%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 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: 8vw;
  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%;
  background-color: #fceee3;
  width: 100vw;
  min-height: 100vh;
  padding-top: 72px;
}

.grid-item {
  background-color: #000000;
  width: 100%;
  min-height: 100%;
}

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

.grid-center img {
  display: block;
  width: 100%;
  height: auto;
}

HTML 代码 #

<!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" alt="logo"> </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"> 
          <img src="images/homepageFour.png" alt="homepage content">
      </div>
      
      <div class="grid-item"></div>
    </div>
</body>
</html>

修复后左右黑色边栏会自动和中间长图的高度保持同步，不会再出现滚动半程截断的问题，长图也会严格限制在中间列宽度内，不会溢出网格区域。

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