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

Posted 2023-02-22

【中文标题】尝试在 React 中创建显示页脚，页脚忽略其他 div

【英文标题】：Trying to create a a reveal footer in React, footer ignoring other divs

【发布时间】：2021-09-06 13:36:43

【问题描述】：

我正在尝试在滚动页脚上实现显示，就像：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;

【参考方案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;