如何让React项目中的Footer固定在屏幕底部？

下面给你两种简单可行的方案，直接整合到你的JSX代码里就能生效：

方案1：绝对定位法 #

适合页面内容较少的场景，通过CSS定位直接把Footer固定在视口底部：

function Header() {
    return (
        <header>
            <nav className="nav">
                <img src="./react-logo.png" className="nav-logo" />
                <ul className="nav-items">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

function Footer() {
    return (
        <footer style={{
            position: 'fixed',
            bottom: 0,
            left: 0,
            right: 0,
            backgroundColor: '#f0f0f0', // 可选，避免被内容遮挡
            padding: '10px'
        }}>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

function MainContent() {
    return (
        <div style={{ paddingBottom: '50px' }}> {/* 避免内容被Footer遮挡 */}
            <h1>Reasons I'm excited to learn React</h1>
            <ol>
                <li>It's a popular library, so I'll be 
                able to fit in with the cool kids!</li>
                <li>I'm more likely to get a job as a developer
                if I know React</li>
            </ol>
        </div>
    )
}

function Page() {
    return (
        <div style={{ minHeight: '100vh', position: 'relative' }}> {/* 父容器占满视口高度 */}
            <Header />
            <MainContent />
            <Footer />
        </div>
    )
}

ReactDOM.render(<Page />, document.getElementById("root"))

方案2：Flex布局法 #

更适配内容高度变化的场景——内容超过视口时，Footer自动推到页面底部；内容不足时固定在视口底部：

function Header() {
    return (
        <header>
            <nav className="nav">
                <img src="./react-logo.png" className="nav-logo" />
                <ul className="nav-items">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

function Footer() {
    return (
        <footer style={{
            backgroundColor: '#f0f0f0',
            padding: '10px'
        }}>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

function MainContent() {
    return (
        <div style={{ flexGrow: 1 }}> {/* 内容区自动填充剩余空间 */}
            <h1>Reasons I'm excited to learn React</h1>
            <ol>
                <li>It's a popular library, so I'll be 
                able to fit in with the cool kids!</li>
                <li>I'm more likely to get a job as a developer
                if I know React</li>
            </ol>
        </div>
    )
}

function Page() {
    return (
        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}> {/* 设置Flex布局并占满视口 */}
            <Header />
            <MainContent />
            <Footer />
        </div>
    )
}

ReactDOM.render(<Page />, document.getElementById("root"))

注意事项 #

• 代码里的backgroundColor是可选样式，主要防止Footer和页面内容重叠时文字看不清，可根据需求调整。
• 方案1中的paddingBottom数值建议和Footer的实际高度匹配，避免底部内容被遮挡。

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