固定底部Footer遮挡页面按钮的问题解决方法咨询

固定定位（position: fixed）的Footer会脱离文档流，导致页面底部的内容（比如按钮）被遮挡，以下是几种实用的解决方法：

方法1：给页面主内容添加底部内边距 #

这是最直接的方案，给页面的主内容容器（或<body>）设置padding-bottom，数值大于等于Footer的总高度（包含上下内边距和内容高度）。

根据你提供的Footer样式，它的上下内边距是1rem，字体大小1.2rem，总高度约为3.2rem，可以设置稍大的数值预留安全空间：

/* 全局样式或主内容容器的CSS */
body {
  padding-bottom: 4rem;
}

/* 或者针对主内容容器 */
.main-content {
  padding-bottom: 4rem;
}

方法2：添加Footer占位元素 #

在Footer的同级位置添加一个空的占位元素，高度与Footer一致，让文档流自动预留出Footer的空间，避免内容被遮挡。

修改页面结构（比如App.jsx）：

import Footer from "./Footer";

function App() {
  return (
    <>
      {/* 页面所有内容 */}
      <div className="page-content">
        {/* ...你的页面组件和按钮 */}
      </div>
      {/* Footer占位元素 */}
      <div className="footer-placeholder"></div>
      <Footer />
    </>
  );
}

export default App;

然后添加占位元素的CSS：

.footer-placeholder {
  height: 4rem; /* 与Footer的总高度匹配 */
}

方法3：动态计算Footer高度（进阶） #

如果Footer的高度不固定（比如内容可能换行），可以用JavaScript动态计算Footer的高度，再给主内容设置对应的内边距：

import { useEffect } from "react";
import "./Footer.css";

const Footer = () => {
  useEffect(() => {
    const footer = document.querySelector("footer");
    const footerHeight = footer.offsetHeight;
    document.body.style.paddingBottom = `${footerHeight + 10}px`; // 额外加10px避免紧贴
  }, []);

  return (
    <footer>
      <p>Copyright © 2022</p>
    </footer>
  );
};

export default Footer;

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