-1

On my website, I am struggling to get the footer always at the bottom of the page but I mean at the bottom of the page below the content. It seems that in my case the footer stay always position at the height of the screen instead of being below the content and adjust its position.

This what it looks like:

enter image description here

below is the code of the App.js who handle the layout-ing


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Header from './components/Header';
import Footer from './components/Footer';


import Home from './pages/Home';
import NoPages from './pages/NoPages';
import Discover from './pages/Discover';
import HowItWorks from './pages/HowItWork';
import CreateClassAndHost from './pages/CreateClassAndHost';
import Profile from './pages/Profile';
import Messages from './pages/Messages';
import Settings from './pages/Settings';
import Logout from './pages/Logout';
import CreateClass from './pages/CreateClass';
import CreateHost from './pages/CreateHost';
import HereIsTheMission from './pages/HereIsTheMission';
import SuccessfullSubmission from './pages/SuccessfullSubmission';

import './App.css';

function App()  {
    return (
      <div className="app-container">
        <div class="app-header">
          <div class="app-header-menu">
            <Header />
          </div>
        </div>
        <Router>
        <div>
          <Switch>
          <Route path="/" exact component={ Home } />
          <Route path="/discover" component={ Discover } />
          <Route path="/howitworks" component={ HowItWorks } />
          <Route path="/create" component={ CreateClassAndHost } />
          <Route path="/profile" component={ Profile } />
          <Route path="/messages" component={ Messages } />
          <Route path="/settings" component={ Settings } />
          <Route path="/logout" component={ Logout } />
          <Route path="/hereisthemission" component={ HereIsTheMission } />
          <Route path="/createaclass" component={ CreateClass } />
          <Route path="/createahost" component={ CreateHost } />
          <Route path="/successfull" component={ SuccessfullSubmission } />
          <Route path="*" component={ NoPages } />
          </Switch>
        </div>
        </Router>
        <div class="app-footer">
          <div class="app-footer-menu">
            <Footer/>
          </div>
        </div>
      </div>
    );
  }

export default App;

and the associated css:

body,html{
    height :100%;
}

.app-container{
    display :flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
}

.app-header{
    background-color:white;
    padding:10px;
  }

.app-header-menu{
    background-color:white;
    padding:10px;
    width:100vw;
}

.app-footer{
    position:absolute;
    bottom:0;
    text-align:center;
    }

.app-footer-menu{
    padding:10px;
    background-color:white;
    width:100vw;
}

Any idea to always make sure the footer in at the bottom below the content. Thanks

Seb
  • 2,929
  • 4
  • 30
  • 73

1 Answers1

-1

You need to but your footer component outside the Router :)

Have fun ^^

RaeperFR
  • 27
  • 3
  • I don't think that will work. But you are on the right track, Take the last closing div tag and place it just before
    you need to take the footer out of your flex container
     – DCR Jun 13 '20 at 19:59
  • @DCR So I tried your solutions and it's not working. I have update my code in the description but there is no change – Seb Jun 13 '20 at 20:36
  • @RaeperFR So I tried your solutions and it's not working. I have update my code in the description but there is no change – Seb Jun 13 '20 at 20:37
  • Put your footer on a div and not on a span ? – RaeperFR Jun 13 '20 at 20:40
  • Or second possibility, bad import ? – RaeperFR Jun 13 '20 at 20:41
  • @RaeperFR Still no luck. What I notice is the footer is stuck at the size of the screen and any content bigger than that will havet the footer on top of it. it's like the footer is fixed at the size of the screen but not dynamically ajusting it;s position at the end of the content – Seb Jun 14 '20 at 06:42
  • @RedBaron any idea ? – Seb Jun 14 '20 at 06:42
  • Seb if it's stuck, it's normal. Because you have a position absolute with bottom. So it stay on the bottom. So just don't do position absolute with bottom and it's good :) But warning ! I give you the solution for unstuck your component – RaeperFR Jun 14 '20 at 08:14