I've seen all of the other answers, REALLY struggling with Sticky Footer in React. WON'T STICK TO THE BOTTOM - reactjs

Question

I am trying to get my footer to stick to the bottom and not cover any body elements toward the bottom of the screen and I cannot seem to figure it out. Here is my footer.js
import React from "react";
import './Stylesheets/Footer.css';
import NavbarBrand from 'react-bootstrap/NavbarBrand';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
class Footer extends React.Component {
state = { clicked: false }
handleClick = () => {
this.setState({ clicked: !this.state.clicked })
}
render() {
return (
<footer className="footerItems">
<div className="phantom"></div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<i class="fab fa-2x fa-github"></i>
<i class="fab fa-2x fa-facebook-square"></i>
<i class="fab fa-2x fa-twitter-square"></i>
<i class="fab fa-2x fa-instagram"></i>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
)
}
}
export default Footer
I am trying to use a phantom <div> to force some additional spacing but that is not working. Here is the corresponding css file.
footer {
height: 80px;
margin-top: -200px;
bottom: 0;
z-index: 999;
}
.phantom {
display: 'block';
padding: '20px';
height: '60px';
width: '100%';
}
.footerItems {
position: fixed;
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
height: 100vh;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
color: #080202;
}
.wrapper a:nth-child(2) {
color: white;
}
.wrapper a:nth-child(3) {
color: #1DA1F2;
}
.wrapper a:nth-child(4){
color: #f24f1d;
}
.wrapper i:hover {
margin-top: -3px;
text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}
Any thoughts or suggestions??
THANK YOU

Answer 1

Here's a solution using position: sticky. The main things to note here is that the main div needs to be at least the height of the page, that way the top property can force it to the bottom. The bottom property then forces it to stay at the bottom even if scrolled past.
This doesn't remove the footer from affecting the height of the page, so it'll all be scrollable without issue.
The other thing to note is that this solution (as written) is based on knowing the height of the footer in advance, so I put a custom css property --footer-height: 60px to set that.
I'm not really sure why the icons and things don't show on the footer as given, but that's a different question
const { NavbarBrand, Navbar, Container } = ReactBootstrap;
class Footer extends React.Component {
state = {
clicked: false,
};
handleClick = () => {
this.setState({
clicked: !this.state.clicked,
});
};
render() {
return (
<footer className="footerItems">
<div className="phantom"> </div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<a href="http://www.github.com" target="_blank">
<i class="fab fa-2x fa-github"> </i>
</a>
<a href="http://www.facebook.com" target="_blank">
<i class="fab fa-2x fa-facebook-square"> </i>
</a>
<a href="http://www.twitter.com" target="_blank">
<i class="fab fa-2x fa-twitter-square"> </i>
</a>
<a href="http://www.instagram.com" target="_blank">
<i class="fab fa-2x fa-instagram"> </i>
</a>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
);
}
}
ReactDOM.render(
<div className="main">
<div className="content">Content!</div> <Footer />
</div>,
document.getElementById('root')
);
.main {
min-height: 100vh;
--footer-height: 60px;
}
.content {
height: 100vh;
background: linear-gradient(0deg, green 0%, white 100%);
}
footer {
height: var(--footer-height);
position: sticky;
top: calc(100vh - var(--footer-height));
bottom: 0;
}
.phantom {
display: block;
padding: 20px;
height: var(--footer-height);
width: 100%;
}
.footerItems {
/*position: fixed;*/
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
/*height: 100vh*/
;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<div id="root" />