Footer do not automatically position itself beneath the content

Question

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 stays always position at the height of the screen instead of being below the content and adjust its position.

This what it looks like:

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 CreateHostOnBoardingForm from './pages/HostCreationOnBoarding/CreateHostOnBoardingForm';
import CreateClassOnBoardingForm from './pages/ClassCreationOnBoarding/CreateClassOnBoardingForm';

import './App.css';

function App()  {
    return (
      <div className="app-container">
        <div class="app-header">
          <div class="app-header-menu">
            <Header />
          </div>
        </div>
        <Router>
        <div className="page-content">
          <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="/onboardingclasscreation" component= { CreateClassOnBoardingForm} />
          <Route path="/onboardinghostcreation" component= { CreateHostOnBoardingForm } />
          <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;
    text-align:center;
    flex-shrink: 0;
    bottom: 0;
    }
    
.app-footer-menu{
    padding:10px;
    background-color:white;
    width:100vw;
}

.page-content {
    min-height: 100vh;
    flex: 1 0 auto;
}

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

The question has been closed previously and not solved. @TemaniAfif — Seb, Jun 17 '20 at 07:06
@RedBaron I got a good exercice for you :-) So none of the solution proposed works. the footer is fixed on the bottom of the page but if the content is higher that the page, the footer overlap the content — Seb, Jun 23 '20 at 06:45

Vivek Doshi · Answer 1 · 2020-06-14T07:10:33.343

0

position:fiexd; can solve the issue, but if you can create a working demo, I can suggest better solution also:

.app-footer{
    position:fiexd; // <---- HERE
    bottom:0;
    text-align:center;
}

You can also do something like this :

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; // <--- provide some min height so footer stick to footer
  position: relative; // <--- provide position relative
}

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

WORKING DEMO : (you can check the footer by changing the content)

edited Jun 14 '20 at 07:10

answered Jun 14 '20 at 06:55

Vivek Doshi

56,649
12
110
122

So I cannot use fixed because it stuck the footer at the bottom of the screen not at the bottom but always below the content – Seb Jun 17 '20 at 07:05
@Seb, you can check the second solution in that case, see the demo – Vivek Doshi Jun 17 '20 at 07:06
no much chance to make it works – Seb Jun 23 '20 at 06:44

score 0 · Answer 2 · answered Jun 14 '20 at 07:01

0

Create 2 classes and add classes in sibling elements

.sticky--footer {
 position: fixed;
 left:0;
 right:0;
 margin: 0 auto;
 bottom: 0;
 z-index: 2;
 box-sizing: border-box;
 padding: 0 .2rem; // depends on need
 height: var(--footerHeight);
 }

.with--footer {
  padding-bottom:. var(--- footerHeight)
 }

answered Jun 14 '20 at 07:01

xkeshav

53,360
44
177
245

I am not sure to understand how to do it. I have updated the code in my description. IF you could use it as reference, it would be great – Seb Jun 23 '20 at 06:40

Footer do not automatically position itself beneath the content

2 Answers2