如何让Material UI底部导航栏置于页面最底部而非固定显示？

核心问题分析 #

你当前的Footer使用了position="fixed"，这会让它始终固定在浏览器视窗底部，无论页面内容多长都会一直显示。要实现「仅在主体内容下方才显示」的效果，需要调整定位方式并优化页面布局。

解决方案步骤 #

1. 修改Footer组件的AppBar定位 #

移除position="fixed"（Material UI的AppBar默认定位为static，会遵循正常文档流），同时删除固定定位相关的top: 'auto', bottom: 0样式：

修改后的Footer代码：

return (
  <React.Fragment>
    <CssBaseline />
    {/* 移除fixed定位，使用默认static定位 */}
    <AppBar id="footer" sx={{ bgcolor: 'background.paper' }}>
      <Toolbar disableGutters>
        <Box 
          sx={{ 
            flexGrow: 1, 
            display: 'flex', 
            justifyContent: 'center', 
            textAlign: 'center', 
            width: '100%', 
            flexDirection: 'column' 
          }}
        >
          <div id="upper-footer">
            {/* 修正：img标签无需href，用a标签包裹实现跳转 */}
            <a href="/">
              <img
                src={Logo}
                id="footer-logo"
                style={{ width: "10%", marginTop: "10px", marginBottom: "10px" }}
                alt="logo"
              />
            </a>
            <div id="social-icons">
              <FacebookIcon sx={{ m: 0.5 }}/>
              <InstagramIcon sx={{ m: 0.5 }}/>
              <GoogleIcon sx={{ m: 0.5 }}/>
            </div>
            <div id="footer-contact">
              {/* 修正：直接把电话链接绑定到Typography的component上 */}
              <Typography
                variant="h6"
                noWrap
                component="a"
                href="tel:0000000000"
                sx={{
                  mr: 2,
                  display: { xs: "none", md: "flex" },
                  fontFamily: "montserrat, sans-serif",
                  fontWeight: 700,
                  color: "inherit",
                  textDecoration: "none",
                  alignItems: "center"
                }}
              >
                <PhonelinkRingIcon sx={{ m: 0.5 }}/> (000) 000-0000
              </Typography>
              {/* 修正：非跳转文本用span作为component */}
              <Typography
                variant="h6"
                noWrap
                component="span"
                sx={{
                  mr: 2,
                  display: { xs: "none", md: "flex" },
                  fontFamily: "montserrat, sans-serif",
                  fontWeight: 700,
                  color: "inherit",
                  alignItems: "center"
                }}
              >
                <LocalActivityIcon sx={{ m: 0.5 }}/> Tickets Available Soon
              </Typography>
            </div>
          </div>
          <div id="lower-footer">
            <p>More Content Here</p>
          </div>
        </Box>
      </Toolbar>
    </AppBar>
  </React.Fragment>
)

2. 优化页面容器布局（可选但推荐） #

如果页面内容较短，希望Footer能自动贴在视窗底部（而非随短内容悬浮在中间），可以给appContainer添加flex布局：

修改应用渲染结构：

return (
  <div 
    id='appContainer' 
    sx={{ 
      display: 'flex', 
      flexDirection: 'column', 
      minHeight: '100vh',
      margin: 0,
      padding: 0
    }}
  >
    <Header />
    <Nav currentPage={currentPage} handlePageChange={handlePageChange} />
    {/* 让主体内容占满剩余空间，把Footer推到下方 */}
    <div sx={{ flexGrow: 1 }}>
      {renderPage()}
    </div>
    <Footer />
  </div>
)

效果说明 #

• 移除fixed定位后，Footer会回到正常文档流，只有当页面滚动到主体内容的最底部时才会显示出来。
• 添加flex布局后，无论内容长短，Footer都会始终处于页面的最底部：内容短则贴在视窗底部，内容长则跟随内容到页面末端。

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