Search code examples
cssreactjsfooter

How to create footer fixed to bottom even scrolling?

I built a web app and i want to add some footer to the bottom , but the problem is that the footer that i created shows only at the end of the page and if i scrolling down he is still at same position

for example: I open a new tab of my app and i see this: enter image description here

If i scroll down the page i see this: enter image description here

display:"fixed" in my css is not good option to me because I want the footer be under all items,stick to buttom of the page.

Users will se the footer only if they scroll down until the end of the page.

this is my css style:

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding:10px;
    background-color:#17a2b8;
    text-align:center;
    color:white;
}

my Footer: import React from "react"; import './Footer.css'

const Footer = () => (
  <footer>
    <p>This is some content in sticky footer</p>
  </footer>
);

export default Footer;

EDIT

after i change my css style to :

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding:10px;
    background-color:#17a2b8;
    text-align:center;
    color:white;
}

.main-wrapper {
    position: relative;
    min-height: 100vh;
   }

and wrap my App with main-wrapper div:

 return(
  <Provider store={store}>
    <Router>
     <div className="main-wrapper">
    <Fragment>
        <Navbar/>
        <Route exact path="/" component={Landing} />
        <Switch>
        <div className="container">
          <Route exact path="/register" component={Register}/>
          <Route exact path="/login" component={Login}/>
          <Route exact path="/profiles" component={Profiles}/>
          <Route exact path="/profile/:id" component={Profile}/>
          <PrivateRoute exact path="/dashboard" component={Dashboard}/>
          <PrivateRoute exact path="/create-profile" component={CreateProfile}/>
          <PrivateRoute exact path="/edit-profile" component={EditProfile}/>
          <PrivateRoute exact path="/add-education" component={AddEducation}/>
          <PrivateRoute exact path="/add-experience" component={AddExperince}/>
          <PrivateRoute exact path="/posts" component={Posts}/>
          <PrivateRoute exact path="/posts/post/:id" component={Post}/>
          </div>
        </Switch>
        <Footer/>
      </Fragment>
      </div>
    </Router>
  </Provider>
)}

I still have a little bit margin:

enter image description here

Solution 
  • .main-wrapper {
 position: relative;
 min-height: 100vh;
}

    return(
  <Provider store={store}>
    <Router>
    <div className="main-wrapper">
        <Navbar/>
        <Route exact path="/" component={Landing}/>
        <Switch>
        <div className="container">
          <Route exact path="/register" component={Register}/>
          <Route exact path="/login" component={Login}/>
          <Route exact path="/profiles" component={Profiles}/>
          <Route exact path="/profile/:id" component={Profile}/>
          <PrivateRoute exact path="/dashboard" component={Dashboard}/>
          <PrivateRoute exact path="/create-profile" component={CreateProfile}/>
          <PrivateRoute exact path="/edit-profile" component={EditProfile}/>
          <PrivateRoute exact path="/add-education" component={AddEducation}/>
          <PrivateRoute exact path="/add-experience" component={AddExperince}/>
          <PrivateRoute exact path="/posts" component={Posts}/>
          <PrivateRoute exact path="/posts/post/:id" component={Post}/>
          </div>
        </Switch>
        <Footer/>
      </div>
    </Router>
  </Provider>
)}

    This is will work now