CSS Grid实现头部自适应、侧边栏固定，内容区占剩余屏幕空间

直接上可行方案，核心是利用Grid的弹性空间分配+视口高度，结合overflow实现滚动：

第一步：基础HTML结构 #

假设你的布局结构是这样的（可根据实际调整类名）：

<div class="grid-wrapper">
  <header class="page-header">这是头部，移动端文字换行时高度会自动变化</header>
  <aside class="page-sidebar">固定侧边栏内容</aside>
  <main class="page-content">
    <!-- 这里放超长内容，比如大量文本、列表等 -->
  </main>
</div>

第二步：关键CSS代码 #

/* 重置默认边距，避免影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让网格容器占满整个视口高度 */
.grid-wrapper {
  display: grid;
  height: 100vh; /* 核心：固定容器高度为视口高度 */
  grid-template-rows: fit-content(100%) 1fr; /* 第一行头部自适应高度，第二行占剩余空间 */
  grid-template-columns: 200px 1fr; /* 第一列侧边栏固定宽度，第二列内容区占剩余 */
  grid-template-areas:
    "header header"
    "sidebar content";
}

.page-header {
  grid-area: header;
  padding: 1rem;
  background: #f0f0f0;
  /* 头部自动适应内容高度，无需固定 */
}

.page-sidebar {
  grid-area: sidebar;
  padding: 1rem;
  background: #e0e0e0;
  /* 侧边栏固定在视口内，不会随内容滚动 */
}

.page-content {
  grid-area: content;
  padding: 1rem;
  overflow-y: auto; /* 核心：内容溢出时垂直滚动 */
  /* 这里不需要设置固定高度，Grid的1fr已经让它占满剩余空间 */
}

方案说明 #

• 网格容器设置height: 100vh是核心，确保它的高度锚定在视口，这样1fr才能准确计算剩余空间。
• grid-template-rows: fit-content(100%) 1fr：第一行（头部）会根据内容自动调整高度，最大不超过视口；第二行（侧边栏+内容区的容器行）占满剩下的所有空间。
• 内容区设置overflow-y: auto，当内容超过分配的空间时自动出现滚动条，而头部和侧边栏始终固定在视口内。
• 移动端适配：如果需要在小屏幕下调整布局（比如侧边栏移到下方），只需修改grid-template-areas和grid-template-columns/rows，头部的fit-content依然会自动适应换行后的高度，内容区还是占剩余空间。

额外提示 #

如果你的页面有全局的body边距或滚动条，记得给body加margin: 0; overflow: hidden;，避免视口高度计算出现偏差。

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