Question 72932 in Reactjs Question posted in
The new location for the React Documentation can be found here.

When I use footer component in react , footer does not set at the bottom of the page – Reactjs

I fixed it! I had h-screen instead of min-h-screen in the home component

When I use footer component in react , footer does not set at the bottom of the page. It fits in the middle

function App() {
  return (
    <>
        `<Navbar />
            <Routes>
                <Route path="/" element={ <Home /> } />
                <Route path="about" element={ <About /> } />
                <Route path="collection" element={ <Collection /> }/>
                <Route path="contact" element={ <Contact /> } />
                <Route path='*' element={ <Error /> } />
            </Routes>
        <Footer />
      </>
    )
}

footer

import React from 'react'
const Footer = () => {
  return (
    <div>
      <h1>Footer</h1>
    </div>
  )
}

I tried almost everything but…

Tags:

2

Answers


  1. 0

    you can wrap your components in a div and style the div using flex-box

          <div className="flex flex-col justify-between"> //if you are using tailwindCSS if not give the div a className of your choice styles are down below
        <div>
          <Navbar />
            <Routes>
                <Route path="/" element={ <Home /> } />
                <Route path="about" element={ <About /> } />
                <Route path="collection" element={ <Collection /> }/>
                <Route path="contact" element={ <Contact /> } />
                <Route path='*' element={ <Error /> } />
            </Routes>
        </div>
        <Footer />
      </div>

    css

     body{
    min-height: 100vh;
    height: 100%;
  }

.className{
     display: flex;
     flex-direction: col;
     justify-content: between;
  }

    this will push down the footer to the bottom even when there is no content on the screen/routes optionally you can push the footer down even more by using the margin property

    if you are trying to make the footer always at the bottom ie make it fixed to the bottom overlaying any content u can use the styles below on the footer and omit the code I wrote above

    .footer_class{
    display: fixed;
    bottom: 0;
    z-index: 100; //optionally edit this value and make it greater than any other element that might have a greater z-index than the footer that might intersect with it
  }
    Login or Signup to reply.
  2. 0

    There’s no more code to fix but you could be just looking for it be fixed at bottom by positioning?

    .footer-div {
  position: fixed;
  bottom: 0;
  height: 300px; /* height of your footer */
  width: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search