页脚在页面滚动弹跳时不会拉伸

Question

在我的 React vite 项目中，当页面滚动到末尾并发生弹跳效果时，我的页脚不会拉伸。这种反弹效果会导致页脚失去左下角和右下角的控制，并且显示原色，这是不希望的。

方法： 我已将正文的背景颜色设置为所需的颜色，但这会导致所有其他部分元素“关于”、“体验”、“作品集”和“联系人”继承此颜色。我还将页脚的容器设置为弹性增长，但没有效果。该方法是否应该使页脚拉伸（尽管它不够发达）或将背景容器的颜色设置为所需的颜色，并将所有部分元素设置为主要颜色以免使调色板变得疯狂？

视频： https://vimeo.com/850126196?share=copy

App.jsx（页脚的父级）

  <BrowserRouter>
  <div className='relative z-0 flex flex-col min-h-screen '>
    {!lampToggle && (
      <Navbar
        heroRef={heroRef}
        animationClass={navbarAnimate ? 'navbar-animate' : ''}
        selectedLang={selectedLang}
        setSelectedLang={setSelectedLang}
      />
    )}
    <div className='flex-grow-1 page-container '>
      <div className='relative z-0'>
        <Hero
          setLampToggleApp={() => setLampToggle(!lampToggle)}
          ref={heroRef}
        />
      </div>

      <About />
      <Experience />

      <Works onProjectClick={handleModalClick} />

      {showModal && (
        <ProjectModal
          modalProject={modalProject}
          onClose={() => setShowModal(false)}
        />
      )}
      <Feedbacks />

      <div className='relative z-0'>
        <Contact />
        <StarsCanvas />
      </div>
      <Footer />
    </div>
  </div>
</BrowserRouter>

页脚.jsx

import React from 'react';

const Footer = () => {
const currentYear = new Date().getFullYear();
const yourName = '© K';

return (
<div
  className='absolute bottom-0 left-0 right-0 w-full bg-black 
  text-white flex justify-center items-center text-sm p-2'
  style={{ zIndex: '9999' }}
   >
  <p className='garet-book'>{yourName}</p>
  <p className='garet-book ml-2'>{currentYear}</p>
  </div>
  );
 };

导出默认页脚；