本文详解如何构建一个头部和侧边栏固定定位、主内容区（网格卡片容器）独立垂直滚动的现代网页布局，解决 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 最新版验证通过，支持触屏设备惯性滚动，是构建管理后台、仪表盘等固定导航类应用的生产就绪布局模式。
