如何实现React Dashboard侧边栏固定且内容区域可滚动？

固定定位方案 #

• 给侧边栏设置固定定位，让它脱离文档流，保持在视口内不随页面滚动：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh; /* 占满整个视口高度 */
  width: 250px; /* 根据你的侧边栏实际宽度调整 */
  overflow-y: auto; /* 当侧边栏内容超出视口时，自身内部滚动 */
}

• 同时给内容区域设置左侧外边距，避免被侧边栏遮挡：

.content-area {
  margin-left: 250px; /* 数值与侧边栏宽度一致 */
}

Flex布局适配方案 #

如果你的Dashboard采用flex布局，调整父容器和侧边栏的属性：

.dashboard-container {
  display: flex;
  min-height: 100vh; /* 让容器占满视口高度 */
}
.sidebar {
  flex-shrink: 0; /* 禁止侧边栏被压缩 */
  width: 250px;
}
.content-area {
  flex: 1; /* 占满剩余空间 */
  overflow-y: auto; /* 内容区域单独滚动 */
}

排查滚动容器 #

• 检查是否有父级元素设置了overflow: auto或overflow: scroll，导致整个页面容器滚动，这种情况下要把滚动属性移到内容区域上，让侧边栏保持固定高度。

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