How to make the footer be at the bottom of the screen?

Question

I currently have some code that runs fine but no matter what I do, I cannot get the footer to stick to the bottom of the screen. Is it possible for anyone who can come up with a quick solution for this to add it to jsx code?

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

Beware of some of the answers below — especially those advocating `position: absolute` or `position: fixed`. Better to design a more robust layout, using something like Grid. For best answers, supply an actual HTML/CSS layout that people can help with. This is a CSS issue, so posting JS is of no use. — ralph.m, Jun 02 '23 at 03:27
"...no matter what I do..." What did you do and what went wrong? Are you using any CSS? — showdev, Jun 02 '23 at 03:53

score 1 · Answer 1 · answered Jun 02 '23 at 03:21

you can do it with inline css like:

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

or create a css file:

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

score 0 · Answer 2 · answered Jun 02 '23 at 03:18

0

Try this. Give the footer a position of absolute, bottom 0. See if it works. You can use inline-styles if you prefer it.

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

answered Jun 02 '23 at 03:18

Zero Hour

73
8

```position: "absolute";``` will make the footer overlap with other elements – Mohammad Hussein Rostami Jun 02 '23 at 03:26

score 0 · Answer 3 · answered Jun 02 '23 at 03:24

You can simply add the bellow styles to your code and change the dev structure.

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

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

score 0 · Answer 4 · answered Jun 02 '23 at 05:52

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

Try this one, it worked for me, because it won't matter the size of the other pages you add in between, the footer will stick at the bottom.

How to make the footer be at the bottom of the screen?

4 Answers4