双Div布局：fixed背景Div下内容Div滚动条高度异常的解决方法

问题 #

现有两个Div组件：

• 第一个是全屏fixed定位的非滚动背景Div
• 第二个是可滚动内容Div

期望将背景Div仅作为背景层，实现内容Div如同单个Div般正常滚动，但当前存在以下问题：

1. 滚动条来自.outer-container，初始加载时高度显示正确，但因第一个子Div为fixed定位，滚动时高度计算异常
2. 具体表现：
   • 拖动滚动条到底部，无法显示内容Div的“Bottom”文本，因为滚动条高度不足
   • 鼠标滚轮滚动时，滚动条显示已到底部，但点击内容Div后继续滚轮滚动才能看到底部内容
3. 推测原因：fixed定位的背景Div导致内容Div的滚动条高度计算错误

需求：

1. 内容Div滚动效果等同于单个Div，背景Div仅作背景
2. 背景Div将包含复杂组件，并非仅背景图
3. 认为CSS无法解决，需JS动态处理
4. 内容Div未来可容纳任意组件

解决方案 #

方案一：纯CSS修复（推荐） #

问题根源是.outer-container设置了固定的200vh高度，而fixed元素脱离文档流，导致容器高度和内容实际高度不匹配。调整布局结构，让滚动条直接作用于内容层，同时保留fixed背景：

修改后的CSS代码

/* 重置全局样式，避免默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden; /* 隐藏全局滚动条 */
}

.background-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; 
  background-color: lightblue; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.content-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto; /* 内容层自身滚动 */
  z-index: 2;
  padding-top: 100vh; /* 让内容从背景下方开始 */
}

/* 可选：自定义滚动条样式，提升体验 */
.content-section::-webkit-scrollbar {
  width: 8px;
}
.content-section::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

修改后的TwoDiv.jsx（无需结构调整，仅移除outer-container）

import React from 'react';
import './TwoDiv.css';

const TwoDiv = () => {
  return (
    <>
      <div className="background-section">
        <h1>Full Screen Background</h1>
      </div>
      <div className="content-section">
        <h1>Top</h1>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <h1>Bottom</h1>
      </div>
    </>
  );
};

export default TwoDiv;

方案二：JS动态处理（按需使用） #

如果必须保留原结构，可通过JS监听内容层高度变化，动态设置外层容器的高度：

修改后的TwoDiv.jsx

import React, { useEffect, useRef } from 'react';
import './TwoDiv.css';

const TwoDiv = () => {
  const outerContainerRef = useRef(null);
  const contentSectionRef = useRef(null);

  useEffect(() => {
    const updateOuterHeight = () => {
      if (outerContainerRef.current && contentSectionRef.current) {
        // 外层容器高度 = 背景高度（100vh） + 内容层实际高度
        const contentHeight = contentSectionRef.current.offsetHeight;
        outerContainerRef.current.style.height = `${window.innerHeight + contentHeight}px`;
      }
    };

    // 初始化时更新高度
    updateOuterHeight();
    // 监听窗口 resize
    window.addEventListener('resize', updateOuterHeight);
    
    // 若内容有动态更新，可添加MutationObserver监听内容变化
    const observer = new MutationObserver(updateOuterHeight);
    if (contentSectionRef.current) {
      observer.observe(contentSectionRef.current, { childList: true, subtree: true });
    }
    
    return () => {
      window.removeEventListener('resize', updateOuterHeight);
      observer.disconnect();
    };
  }, []);

  return (
    <div className="outer-container" ref={outerContainerRef}>
      <div className="background-section">
        <h1>Full Screen Background</h1>
      </div>
      <div className="content-section" ref={contentSectionRef}>
        <h1>Top</h1>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <p>Row</p>
        <h1>Bottom</h1>
      </div>
    </div>
  );
};

export default TwoDiv;

对应的CSS调整（移除outer-container的固定高度）

.outer-container {
  position: relative;
  width: 100%;
  overflow-y: auto; /* Enable vertical scrolling */
}

.background-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; 
  background-color: lightblue; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.content-section {
  position: relative;
  width: 100%;
  z-index: 2;
  margin-top: 100vh;
  background-color: white; 
}

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