如何让Footer在移动端与PC端始终固定于页面底部？

问题原因分析 #

1. 定位依赖缺失：absolute定位需要父容器设置position: relative且占满视口高度（min-height: 100vh），否则移动端会因页面高度不足导致Footer偏移。
2. 响应式布局冲突：当前Grid的xs参数和硬编码marginLeft在移动端会导致布局溢出，破坏定位逻辑。
3. 冗余样式重复：媒体查询内的样式与全局样式完全一致，无实际作用。

具体解决方案 #

1. 配置根容器布局

给页面的根容器（Footer的直接父元素）添加以下样式，确保Footer能基于整个视口定位：

.page-container {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px; /* 根据Footer实际高度调整，防止内容被遮挡 */
}

2. 调整Footer定位样式

推荐两种定位方案，二选一即可：

• 方案一：absolute定位（基于页面底部）

  .footer_styles {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a; /* 必须设置背景色，避免透显下方内容 */
  }
  

• 方案二：fixed定位（固定在视口底部）

  .footer_styles {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a;
    z-index: 100; /* 防止被其他元素覆盖 */
  }
  

3. 修复移动端Grid布局

用Material UI的响应式属性替代硬编码样式，避免布局溢出：

import React from 'react';
import { Link } from 'react-router-dom';
import Grid from "@material-ui/core/Grid";
import TelegramIcon from '@mui/icons-material/Telegram';
import TwitterIcon from '@mui/icons-material/Twitter';
import { IconLetterM } from '@tabler/icons';
import { language } from "../pages/language";

const Footer = () => {
    return (
        <div className="footer_styles">
            <Grid container sx={{ px: { md: 5, xs: 2 } }}>
                <Grid item md={5} xs={12}>
                    <div>
                        <Link to="/">
                            <img
                                src="assets/media/seven_white.png"
                                className="style_logo__QGaEE"
                                alt="Seven-Chain"
                                style={{ height: '50px', width: '50px' }}
                            />
                        </Link>
                    </div>
                    <br />
                    <h3 style={{ color: 'white' }}>DAPP © {language[localStorageLang].COPYRIGHT} 2023.{language[localStorageLang].RIGHTS}</h3>
                    <div className='icon-separate'>
                        <Link to={{ pathname: "/" }} target="_blank"><span fontSize="large"><TelegramIcon /></span> </Link>
                        <Link to={{ pathname: "/" }} target="_blank"><span fontSize="large"><TwitterIcon /></span> </Link>
                        <Link to={{ pathname: "/" }} target="_blank"><span fontSize="large"><IconLetterM /></span></Link>
                    </div>
                </Grid>
                <Grid item md={6} xs={12} sx={{ mt: { md: 0, xs: 3 } }}>
                    <h3 style={{ color: 'white' }}> {language[localStorageLang].DISCLAIMER} </h3>
                    <h5 style={{ color: 'white' }}> {language[localStorageLang].DISCLAIMER_CONTENT} </h5>
                </Grid>
            </Grid>
        </div>
    )
}

export default Footer;

4. 清理冗余代码

删除原代码中重复的媒体查询样式，减少无效代码。

注意事项 #

• 必须设置Footer的背景色，否则会透显下方页面内容。
• 使用fixed定位时，需给页面主内容添加padding-bottom，避免底部内容被Footer遮挡。
• 优先使用Material UI的sx属性做响应式调整，比inline style更灵活易维护。

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