I am working on a website using react but I can't get the footer to stick to the bottom, when there isn't enough content the footer is showing up right after the content of the page not at the bottom.I tried almost everything, I think there is a problem with the structure it self like from the beginning

Here is my code:

App.css:

.App {
  text-align: center;
}

body{
    min-height: 50%;
    display: flex;
    flex-direction: column;
}
footer.footer{
    margin-top: auto;
    bottom: 0;
    margin-bottom: 0;
}
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px   2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Footer.js:

import React from "react";
import './Footer.css';
import {GrGithub, GrInstagram, GrLinkedin, GrTwitter} from 'react-icons/gr';

export const Footer = () =>{
    return (
        <footer className="footer">
            <p>2022 &copy; All right Reserved <br/> Khaled Nadam</p>
            <ul className="footer-social">
                        <li><GrInstagram /></li>
                        <li><GrLinkedin /></li>
                        <li><GrGithub /></li>
                        <li><GrTwitter /></li>                
                    </ul>
        </footer>
    );
}

Footer.css:

.footer{
    background-color: #1C4B82;
    color: #DAE1E7;
    width: 100%;
}
.footer p{
    padding: 20px 0;
    font-size: .8rem;
    text-align: center;
}
.footer .footer-social{
    margin:auto;
    text-align: center;
    list-style: none;
    display: inline-flex;
    padding-right: 40px;
}
.footer .footer-social li{
    padding: 10px 20px;
}

Thank you in advance.

CodePudding user response：

It is because you are not using position property in your CSS.

Try below code:

body {
  position: relative;
} 

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

CodePudding user response：

you need to add position: absolute to footer css.

.footer{
    position:absolute;
    bottom:0;
    left:0;
    }