CSS固定元素无法滚动求助：背景固定且内容可滚动

核心思路 #

保留背景视频的fixed定位（确保它始终固定在视口背景），调整内容容器#cellarground的布局方式，让它回到文档流中，通过外边距实现从页面中间开始排列，这样内容超出视口时页面会自动生成滚动条。

修改后的CSS代码 #

#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
#cellarground {
  margin-top: 50vh; /* 让容器从视口中间位置开始 */
  min-height: 50vh; /* 确保至少占满视口下半部分，避免内容过少时容器高度不足 */
  padding: 0 20px; /* 可选：添加内边距，避免内容贴边 */
}

改动原因 #

• 原来的position: fixed会让容器脱离文档流，页面无法识别容器的实际高度，因此不会生成滚动条。
• 改用margin-top:50vh后，容器处于正常文档流中，当内容总高度超过视口时，页面会自动出现滚动条，就能正常滚动到底部链接。
• 背景视频的fixed定位不受影响，始终固定在页面背景。

额外优化建议 #

如果需要让内容排版更美观，可以补充以下样式：

#cellarground {
  margin-top: 50vh;
  min-height: 50vh;
  padding: 2rem;
  max-width: 1200px; /* 限制最大宽度，避免大屏幕上内容过宽 */
  margin-left: auto;
  margin-right: auto; /* 实现水平居中 */
  color: #fff; /* 若视频亮度较高，设置白色文字提升可读性 */
}

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