尝试在 React 中创建显示页脚，页脚忽略其他 div

Question

我正在尝试在滚动页脚上实现显示，就像：https://codepen.io/thomasbobs/pen/KGyvMx

问题是当我将页脚设置为position: fixed; 时，它会忽略相对定位的 div 的定位并越过它们。

我的 main.js：

<>
    <Modal
        show={isModalOpen}
        modalInfo={modalInfo}
        setIsModalOpen={setIsModalOpen}
        viewport={props.viewport}
    />
    <main id="main">
        <About aboutRef={aboutRef}/>
        <Skills skillsRef={skillsRef}/>
        <Portfolio setIsModalOpen={setIsModalOpen} setModalInfo={setModalInfo} projectRef={projectRef}/>
        <Contact contactRef={contactRef}/>
    </main>
</>

我的 App.js

<div className="App">
    <Navbar isMobile={isMobile} isTop={isTop} activeRef={activeRef} progress={progress}/>
    <div className="canvas-wrapper">
        <Canvas colorManagement camera={{position: [-5,2,50]}}>
            <HeaderContent/>
            <ambientLight intensity={0.5} />
            <Stars/>
        </Canvas>
    </div>
    <div className="main-wrapper">
        <Main isMobile={isMobile} viewport={viewport} activeRef={activeRef} setActiveRef={setActiveRef} setIsTop={setIsTop}/>
    </div>
    <Footer />
</div>

我的 Main-wrapper 和 Footer scss：

.main-wrapper{
    position: relative;
    z-index: 1;
    margin: 0;
}
footer{
    width: 100%;
    height: 100px;
    height: 100%;
    background-color: #000;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    color: white;
}

Answer 1

删除height: 100% 并为main-wrapper 添加背景颜色

.main-wrapper {
    position: relative;
    z-index: 1;
    background: grey;
    margin-bottom: 100px;
}

.footer {
    width: 100%;
    height: 100px;
    background-color: #000;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    color: white;
}