How to position footer in my React Router?

Question

I am having problems getting my Footer component to appear at the bottom of the page. And can't seem to see what the issue is.

Here is my App.js:

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Landing from "./components/layout/Landing";
import Contact from "./components/layout/Contact";
import Footer from "./components/layout/Footer";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route exact path="/contact" element={<Contact />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

Now the navbar appears at the top of the page however the Landing component sits behind it (also advice on how to stop that would be great).

Inside the Landing Component we have two components a such:

import React from "react";
import LandingInner from "../pages/landing/LandingInner";
import LandingCards from "../pages/landing/LandingCards";

const Landing = () => {
  return (
    <section className="landing">
      <div className=" dark-overlay">
        <LandingInner />
        <LandingCards />
      </div>
    </section>
  );
};

export default Landing;

The Footer appears at the bottom of the page upon loading the page (it appears on screen) however I don't want it to appear on the screen unless you scroll down and it should just be the last component on every page that i go to. Like the Navbar is always the first.#

Here is the current css for the Footer:

.footer {
  border: 5px solid black;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

Hope this makes sense. But just to clarify; I want the footer appear at the bottom of every page(not the screen) that I go to on my app.

Answer 1

First of all, if you want the footer to always appear at the bottom no matter what ie. when scroll bar appears and content scrolls and when content is less and there is no scroll bar then the solution is very simple ie. make position fixed of footer and set it to bottom and left 0 with width 100%.

But if you want the footer to go to the bottom when content is less and go to the end of the content when content is large enough to scroll then you need to give your body and HTML height of 100% with a few more tweaks that I can create a sandbox for.

let me know if this fixes the issue, you can ask me if you need more information.

You can try flex I've written code for your reference and also created sandbox

https://codesandbox.io/s/empty-cloud-b6h4c?file=/index.html

body,
html {
  height: 100%;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

main {
  flex: 1;
}

<section class="container">
  <main>
    main content
  </main>
  <footer>Some content </footer>
</section>