reactjs 如何使页脚在屏幕的底部？[副本]

ktca8awb 于 2023-06-05 发布在 React

关注(0)|答案(4)|浏览(113)

此问题已在此处有答案：

How do you get the footer to stay at the bottom of a Web page?（32个回答）
2天前关闭。
我目前有一些代码运行良好，但无论我做什么，我无法让页脚坚持到屏幕底部。任何人都有可能想出一个快速解决方案来将它添加到jsx代码中吗？

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>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

function MainContent() {
    return (
        <div>
            <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>
            <Header />
            <MainContent />
            <Footer />
        </div>
    )
}

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

reactjs

来源：https://stackoverflow.com/questions/76386899/how-to-make-the-footer-be-at-the-bottom-of-the-screen

4条答案

按热度按时间

jucafojl1#

你可以用内联CSS来实现，比如：

function Footer() {
    return (
        <footer style={{ position: 'fixed', width: '100%', left: 0, bottom: 0}}>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

或者创建一个CSS文件：

//jsx file
import './css.css'

function Footer() {
    return (
        <footer className='footer'>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

//css file
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

赞(0）回复(0）举报 2023-06-05

dzjeubhm2#

试试这个。给予页脚一个绝对的位置，底部0。看看能不能用如果您喜欢，可以使用内联样式。

function Footer() {
    return (
        <footer className="target-for-my-css">
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

.target-for-my-css{
  position: "absolute";
  bottom: 0;
 }

赞(0）回复(0）举报 2023-06-05

qacovj5a3#

您可以简单地将下面的样式添加到代码中并更改dev结构。

function ErrorExample() {
    return (
        <>
            <div style={{ minHeight: "100vh", marginBottom: "-50px" }}>
                <Header />
                <MainContent />

            </div>
            <Footer />
        </>
    )
}

赞(0）回复(0）举报 2023-06-05

xzlaal3s4#

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{
    margin-top: auto;
}

试试这个，它对我很有效，因为它不会影响你在中间添加的其他页面的大小，页脚会粘在底部。

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs 如何使页脚在屏幕的底部？[副本]

4条答案

相关问题

热门标签

最新问答