本文详解如何构建一个头部和侧边栏固定定位、主内容区（网格卡片容器）独立垂直滚动的现代网页布局，解决 place-content: center 导致内容重叠与无法滚动的问题。

本文详解如何构建一个头部和侧边栏固定定位、主内容区（网格卡片容器）独立垂直滚动的现代网页布局，解决 `place-content: center` 导致内容重叠与无法滚动的问题。

要实现「固定 Header + 固定 Sidebar + 仅 .main 内容区可滚动」的布局，关键在于脱离文档流的精确定位控制与滚动容器的高度隔离。原方案使用 display: grid 配合 grid-template-rows: 56px 1fr 本意良好，但 1fr 在未约束父容器高度时无法触发滚动；而 place-content: center 更会将子元素居中后溢出可视区，导致卡片被遮挡且无法滚动。

✅ 推荐采用 position: absolute + 显式尺寸控制 的稳健方案，其优势在于：

• 完全解耦 header/sidebar 的定位逻辑；
• 精确划分滚动区域（.main），避免全局 body 滚动；
• 兼容性好，无需依赖复杂 Grid 嵌套或 inset 等新特性。

以下是核心 CSS 实现（已优化并补充关键细节）：

:root {
  --color-primary: #202225;
  --color-secondary: #5865f2;
  --body-bg: #0e1217;
  --header-nav-bg: #0e1217;
  --card-bg: #1c1f26;
  --border-color: rgba(107, 107, 107, 0.508);
}

/* 重置基础尺寸，确保全屏占满 */
html {
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 阻止 body 滚动，将滚动权交给 .main */
  font-family: "Fira Code", monospace;
}

/* 固定 Header */
.header-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px; /* 显式高度，便于后续计算 */
  background-color: var(--header-nav-bg);
  border-bottom: 1px solid var(--border-color);
  z-index: 100; /* 确保置于最上层 */
}

/* 固定 Sidebar */
.sidebar {
  position: absolute;
  top: 60px; /* 紧贴 header 下方 */
  left: 0;
  bottom: 0;
  width: 60px; /* 固定宽度，适配图标导航 */
  background-color: var(--body-bg);
  color: var(--color-secondary);
  border-right: 1px solid rgba(123, 123, 123, 0.495);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

/* 可滚动主内容区 —— 核心滚动容器 */
.main {
  position: absolute;
  top: 60px;      /* 与 header 对齐 */
  left: 60px;     /* 躲开 sidebar */
  right: 0;       /* 占满剩余宽度 */
  bottom: 0;      /* 占满剩余高度 */
  overflow-y: auto; /* 仅 Y 轴滚动 */
  overflow-x: hidden;
  padding: 0 1.5rem 1.5rem; /* 内边距替代 cards-container 的 padding-block */
}

/* 卡片容器：设为 100% 高度以撑满 .main，启用 Grid 布局 */
.cards-container {
  background-color: var(--body-bg);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
  padding-block: 1.5rem; /* 垂直内边距由容器统一处理 */
  /* 关键：必须设置最小高度，否则 Grid 不会自动撑开 */
  min-height: 100%;
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem;
  color: #fff;
  /* 可选：防止卡片内容过长破坏布局 */
  display: flex;
  flex-direction: column;
}

? 重要注意事项：

• ❗ .main 必须使用 position: absolute 并显式声明 top/left/bottom/right，不可依赖 margin（如原答案中的 margin: 61px 0 0 60px 在高密度缩放下易错位）；
• ❗ .cards-container 需添加 min-height: 100%，否则当卡片数量少时 Grid 无法填满 .main 高度，导致滚动条不出现；
• ✅ 推荐将 padding-block 移至 .main，使 .cards-container 专注布局逻辑，提升语义清晰度；
• ✅ 若需响应式 sidebar（如展开/收起），可结合 CSS 自定义属性（--sidebar-width）与 transition 实现平滑动画。

此方案已在 Chrome、Firefox、Edge 最新版验证通过，支持触屏设备惯性滚动，是构建管理后台、仪表盘等固定导航类应用的生产就绪布局模式。