How to make a sticky footer in react?

Here’s an idea (sandbox example link).

Include a phantom div in your footer component that represents the footer’s position that other dom elements will respect (i.e. affecting page flow by not being position: 'fixed';).

var style = {
    backgroundColor: "#F8F8F8",
    borderTop: "1px solid #E7E7E7",
    textAlign: "center",
    padding: "20px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "60px",
    width: "100%",

var phantom = {
  display: 'block',
  padding: '20px',
  height: '60px',
  width: '100%',

function Footer({ children }) {
    return (
            <div style={phantom} />
            <div style={style}>
                { children }

export default Footer

Leave a Comment