问题

我目前有一些运行良好的代码，但无论我怎么做，都无法使页脚固定在屏幕底部。是否有人能够快速提供解决方案并将其添加到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"))

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"))

答案1

得分: 1

你可以使用内联 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 文件
import './css.css'

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

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

<details>
<summary>英文:</summary>

you can do it with inline css like:

    function Footer() {
        return (
            &lt;footer style={{ position: &#39;fixed&#39;, width: &#39;100%&#39;, left: 0, bottom: 0}}&gt;
                &lt;small&gt;&#169; 2021 Ziroll development. All rights reserved.&lt;/small&gt;
            &lt;/footer&gt;
        )
    }

or create a css file:

    //jsx file
    import &#39;./css.css&#39;
    
    function Footer() {
        return (
            &lt;footer className=&#39;footer&#39;&gt;
                &lt;small&gt;&#169; 2021 Ziroll development. All rights reserved.&lt;/small&gt;
            &lt;/footer&gt;
        )
    }


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



</details>



# 答案2
**得分**: 0

尝试这个。将页脚的位置设为绝对定位，底部为0。看看是否有效。如果你喜欢的话，你可以使用内联样式。

```jsx
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;
}

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;
 }

答案3

得分: 0

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

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

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

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

答案4

得分: 0

<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-css -->

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


<!-- 结束代码片段 -->

尝试这个，它对我有效，因为无论你在中间添加多少其他页面，页脚都会保持在底部。

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