HTML左右分栏布局页面无法滚动问题求助

核心问题出在 position: fixed 和 overflow: hidden 的组合使用：

• position: fixed 会让元素脱离文档流，即使内容超出视口，也不会触发页面的滚动行为
• 原CSS中body的overflow: hidden直接隐藏了页面滚动条，后续添加的html,body{position: absolute;}反而打乱了正常文档流布局，导致滚动逻辑彻底失效

方案一：使用Flex布局实现正常文档流内的分栏（推荐） #

这种方案让分栏元素留在文档流中，当内容超出视口时自动触发页面滚动：

<body>
  <div class="split-container">
    <div class="split split-left">左栏内容（可添加任意长度的文本或元素）</div>
    <div class="split split-right">右栏内容（可添加任意长度的文本或元素）</div>
  </div>
</body>

/* 重置默认边距，避免布局偏移 */
body {
  margin: 0;
  /* 允许页面在内容溢出时显示滚动条 */
  overflow: auto;
}

.split-container {
  /* 使用flex实现左右均分 */
  display: flex;
  /* 确保容器至少占满视口高度 */
  min-height: 100vh;
}

.split {
  /* 左右栏各占50%宽度 */
  flex: 1;
  padding: 20px;
}

.split-left {
  background-color: #000;
  color: #fff;
}

.split-right {
  background-color: #fff;
  color: #000;
}

方案二：保留fixed定位，让分栏内部独立滚动 #

如果需要分栏固定在视口不随页面滚动，可让每个分栏单独处理内部滚动：

body {
  margin: 0;
  /* 隐藏页面滚动条，因为分栏各自滚动 */
  overflow: hidden;
}

.split {
  position: fixed;
  width: 50%;
  height: 100vh;
  /* 分栏内容溢出时显示内部滚动条 */
  overflow-y: auto;
  padding: 20px;
}

.split-left {
  left: 0;
  background-color: #000;
  color: #fff;
}

.split-right {
  right: 0;
  background-color: #fff;
  color: #000;
}

注意事项 #

• 移除之前添加的html,body{position: absolute;}，这个属性会破坏正常的文档流布局，导致滚动逻辑异常
• 检查是否有其他元素设置了height: 100%或overflow: hidden，可能会间接影响页面滚动

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