I'm currently developing a website with react, but I'm struggling to keep the footer at the bottom. When there isn't enough content, the footer ends up right after the content instead of staying at the bottom. I've tried various solutions, but I believe there might be an issue with the overall structure.
Below is the code I'm working with:
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 © 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;
}
Appreciate any help in advance.