ReactJS+SASS+React-Router-6共享布局下Footer无法固定在底部

问题描述 #

使用React Router 6开发多页应用，共享布局结构如下：

<>
    <div data-theme={theme}>
      <div className="app-container" >
        <Navbar changeTheme={changeTheme} currentTheme= {theme}/>
      </div>
        <Outlet/>
      <div className="app-container">
        <Footer/>
      </div>
    </div>
</>

对应的Sass代码：

.app-container {
    background-color: var(--background);
    font-family: var(--font-family);
    overflow-x: hidden;
    transition: 0.5s ease-in-out;
    padding: 1rem 2rem 0rem 2rem;
    @media screen and (min-width:280px) and (max-width:1080px){
        padding: 0;
        &::-webkit-scrollbar {
            display: none;
        }
    }
}

Footer的样式：

display: flex;
flex-direction: column;
gap: 2rem;
margin-top: auto;
padding-bottom: 2vh;

首页Footer能正常显示在页面底部，但切换到其他路由页面时，Footer会紧跟内容出现在页面中间。尝试过设置min-height减去Footer高度、给Footer加绝对定位（bottom:0）的方案，前者无效，后者会在首页覆盖内容。

解决方案 #

核心是利用Flexbox的自动填充特性，让内容区域占满剩余空间，从而把Footer稳定推到底部，具体步骤如下：

1. 修改共享布局结构 #

给最外层容器添加自定义类，并给Outlet包裹一层容器，用于填充空间：

<>
    <div data-theme={theme} className="page-wrapper">
      <div className="app-container" >
        <Navbar changeTheme={changeTheme} currentTheme= {theme}/>
      </div>
      <div className="content-wrapper">
        <Outlet/>
      </div>
      <div className="app-container">
        <Footer/>
      </div>
    </div>
</>

2. 补充对应的Sass样式 #

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  background-color: var(--background);
  padding: 0 2rem; // 和app-container的左右padding保持一致，避免留白
}

// 保留原有的app-container样式
.app-container {
    background-color: var(--background);
    font-family: var(--font-family);
    overflow-x: hidden;
    transition: 0.5s ease-in-out;
    padding: 1rem 2rem 0rem 2rem;
    @media screen and (min-width:280px) and (max-width:1080px){
        padding: 0;
        &::-webkit-scrollbar {
            display: none;
        }
    }
}

// Footer样式保持不变
.footer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: auto;
    padding-bottom: 2vh;
}

原理说明 #

• page-wrapper设置min-height:100vh确保容器至少占满视口高度，flex-direction:column让子元素垂直排列；
• content-wrapper的flex:1会自动占据Navbar和Footer之外的所有剩余空间，不管内容多少，都会把Footer推到页面底部；
• Footer的margin-top:auto在Flex垂直布局中，会自动将元素固定在容器底部，同时兼容内容过长的场景（页面滚动时Footer仍在可视区域底部）。

这个方案无需计算Footer高度，也不会出现首页内容被覆盖的问题，完美适配响应式布局。

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