CSS Grid全屏布局：内容区无法单独滚动，整页滚动问题求助

你的问题核心是中间内容容器的高度未被正确限制，导致overflow-y: scroll无法触发内部滚动。以下是具体修复方案：

修改后的CSS代码 #

.view-container {
  display: grid;
  grid-template-rows: 75px auto 50px;
  height: 100vh;
  /* 可选：消除页面默认边距，避免全局滚动条干扰 */
  margin: 0;
}

.header-container {}

.body-container {
  display: grid;
  grid-template-columns: 200px auto;
  /* 关键：让body-container占满view-container分配的中间行高度 */
  height: 100%;
}

.sidebar-container {}

.content-container {
  overflow-y: scroll;
  /* 关键：让content-container占满body-container分配的列高度 */
  height: 100%;
  /* 可选：优化滚动条样式（按需调整） */
  /* scrollbar-width: thin; */
}

.footer-container {}

修复原理 #

1. view-container通过grid-template-rows: 75px auto 50px和height:100vh已经将页面划分为固定高度的头部、自适应中间区域、固定高度底部，但中间的body-container默认不会自动填充整个中间行的高度，必须显式设置height:100%来继承父级可用空间。
2. content-container只有在自身高度被限制的前提下，overflow-y: scroll才会生效——如果高度无限制，它会随内容无限延伸，最终导致整个页面滚动。

你的HTML代码无需修改，保持原样即可。

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