Polyakoff Polyakoff - 26 days ago 5
React JSX Question

How to make a sticky footer in react?

I've made a sticky footer higher-level component that wraps other components inside itself:

Footer.js

//this is a higher-order component that wraps other components placing them in footer

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

const Footer = React.createClass({
render: function() {
return (
<div style={style}>
{this.props.children}
</div>
);
}
});

export default Footer;


Usage:

<Footer><Button>test</Button></Footer>


But it is hiding the contents of the page:

hiding contents footer

This looks like a common problem, so I searched a bit and found this issue, where is FlexBox is recommended for the sticky footer. But at this demo the footer is at the very bottom of the page, while I need the footer to be always displayed on the page and the content being scrolled inside the above area (like in SO chat). In addition to that, there is an advice to change all the other components with custom stylesheet rules. Is it possible to achieve what I need using styling only the footer component so the code will remain modular?

Answer

Here's an idea (fiddle link). Include a phantom div in your footer component that represents the footer's position that other dom elements will respect. (position not being fixed, and affecting page flow)

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%',
}

const Footer = React.createClass({
    render: function() {
        return (
            <div>
                <div style={phantom} />
                <div style={style}>
                    {this.props.children}
                </div>
            </div>
        );
    }
});

export default Footer;