Question 180495 in CSS Question posted in
Some basic documentation can be found here.

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

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

3

Answers


  1. 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;
 }
    Login or Signup to reply.
  2. 0

    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%;
}
    Login or Signup to reply.
  3. 0

    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 />
        </>
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search