React Vite项目页面滚动回弹时Footer无法拉伸的问题求助

在我的React Vite项目中，页面滚动至底部触发回弹效果时，Footer无法跟随拉伸，会脱离页面左下角和右下角，露出主题底色，不符合预期。

尝试过的方案 #

• 将body背景色设置为目标颜色，但导致About、Experience、Portfolio和Contact等所有区块元素都继承了该颜色
• 为Footer容器添加flex-grow属性，但没有效果

咨询 #

应该采用让Footer强制拉伸的方案（尽管目前不生效），还是设置一个背景容器为目标颜色，同时将所有区块元素设置为主题色以保证配色正常？

App.jsx（Footer的父组件） #

<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>

Footer.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>
  );
 };

export default Footer;

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