stick footer at the bottom in Reactjs

Question

I'm working on a project in React and ran into a problem that has me stumped.

I want to add footer component but its not working properly.

so here is my code and i am not able to figure out how to keep footer at bottom of my page when ever i scroll down.

if any one have some solution it will be really great if you help me

when i load my page footer componet look like this at bottom of my page

but when i scroll up then it look like this

i am wirting this code in different page (footer.jsx) with footer.module.css and calling in my app.js

Footer.jsx

import React from "react";
import footerStyles from "../styles/Footer.module.css";
import { FaTwitter, FaFacebook, FaInstagram } from "react-icons/fa";

function Footer() {
    return (
        <div id={footerStyles.copyright}>
            <p>
                &copy; Team NexT LeVeL. All rights reserved. | Design by Team NexT
                LeVeL
            </p>
            <ul className={footerStyles.contact}>
                <li>
                    <a href="/#">
                        <FaTwitter size="2em" color="cyan" />
                    </a>
                </li>
                <li>
                    <a href="/#">
                        <FaFacebook size="2em" color="#00acee" />
                    </a>
                </li>
                <li>
                    <a href="/#">
                        <FaInstagram size="2em" className={footerStyles.insta} />
                    </a>
                </li>
            </ul>
        </div>
    );
}

export default Footer;

my footer.module.css look like this

#copyright {
    margin: 0;
    width: 100%;
    border-top: 20px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    background: #333333;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex: 0 0 25%;
}

#copyright p {
    display: inline;
    letter-spacing: 1px;
    font-size: 16px;
    color: white;
}

#copyright a {
    text-decoration: none;
    color: white;
}

/*footer icon*/
ul.contact {
    list-style: none;
}

ul.contact li {
    display: inline;
    font-size: 1em;
    padding: 10px;
}

ul.contact li span {
    margin: 20px;
}

ul.contact li a {
    color: white;
}

ul.contact li a:before {
    display: inline;
    background: #4c93b9;
    line-height: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
}
.insta {
    border-radius: 10px;
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}

Answer 1

Follow this structure.

const App = () => (
    <div style={{paddingBottom: 50}}>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, molestiae. Magni quibusdam doloremque optio rerum ex assumenda mollitia suscipit praesentium, exercitationem ea perspiciatis aut, voluptatum necessitatibus numquam totam. Commodi distinctio nisi non? Voluptas exercitationem nemo aut rem sint? Recusandae nam quisquam maiores sapiente ratione deleniti, corrupti impedit laboriosam voluptatibus repudiandae qui cumque voluptatem labore necessitatibus sed quidem nemo cum, vitae consequatur rem corporis quibusdam non voluptates quia. Amet ipsum ex, dolore quaerat omnis animi placeat totam alias suscipit eveniet voluptate doloremque nisi repellendus sit incidunt, voluptates ratione ea autem esse maiores, qui quasi? Possimus, velit quibusdam! Natus accusantium voluptatem asperiores.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, molestiae. Magni quibusdam doloremque optio rerum ex assumenda mollitia suscipit praesentium, exercitationem ea perspiciatis aut, voluptatum necessitatibus numquam totam. Commodi distinctio nisi non? Voluptas exercitationem nemo aut rem sint? Recusandae nam quisquam maiores sapiente ratione deleniti, corrupti impedit laboriosam voluptatibus repudiandae qui cumque voluptatem labore necessitatibus sed quidem nemo cum, vitae consequatur rem corporis quibusdam non voluptates quia. Amet ipsum ex, dolore quaerat omnis animi placeat totam alias suscipit eveniet voluptate doloremque nisi repellendus sit incidunt, voluptates ratione ea autem esse maiores, qui quasi? Possimus, velit quibusdam! Natus accusantium voluptatem asperiores.
      </p>
      <Footer/>
    </div>
)
function Footer() {
    return (
        <div style={{
          display:"flex",
          position:"fixed",
          width:"100%",
          height: 50,
          backgroundColor: "grey",
          bottom: 0,
        }}>
            <p>
            &copy; Team NexT LeVeL. All rights reserved. | Design by Team NexTLeVeL
            </p>
            <ul style={{display:"flex"}}>
                <li>
                    <a href="/#">
                        Twitter
                    </a>
                </li>
                <li>
                    <a href="/#">
                        Facebook
                    </a>
                </li>
                <li>
                    <a href="/#">
                        Instagram
                    </a>
                </li>
            </ul>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

Try using

position: fixed; 

instead of

position: absolute;

Also, I would suggest floating the element to make sure that the rest of the page isn't moving out of it's way incorrectly:

float: left; 

And then add a padding to the bottom of your body tag with a height taller than your footer, to ensure you don't totally cover anything up

body {
    padding-bottom: 100px;
}