title: How to make a sticky footer in react?
body: <p>I've made a sticky footer higher-level component that wraps other components inside itself:</p>
  <p><strong>Footer.js</strong></p>
  <pre><code>//this is a higher-order component that wraps other components placing them in footer
  
  var style = {
      backgroundColor: &quot;#F8F8F8&quot;,
      borderTop: &quot;1px solid #E7E7E7&quot;,
      textAlign: &quot;center&quot;,
      padding: &quot;20px&quot;,
      position: &quot;fixed&quot;,
      left: &quot;0&quot;,
      bottom: &quot;0&quot;,
      height: &quot;60px&quot;,
      width: &quot;100%&quot;,
  };
  
  const Footer = React.createClass({
      render: function() {
          return (
              &lt;div style={style}&gt;
                  {this.props.children}
              &lt;/div&gt;
          );
      }
  });
  
  export default Footer;
  </code></pre>
  <p><strong>Usage:</strong></p>
  <pre><code>&lt;Footer&gt;&lt;Button&gt;test&lt;/Button&gt;&lt;/Footer&gt;
  </code></pre>
  <p>But it is hiding the contents of the page:</p>
  <p><a href="https://i.stack.imgur.com/m8aFX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/m8aFX.png" alt="hiding contents footer" /></a></p>
  <p>This looks like a common problem, so I searched a bit and found <a href="https://github.com/ReactTraining/react-router/issues/1523" rel="noreferrer">this issue</a>, where is FlexBox is recommended for the sticky footer. But at <a href="https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" rel="noreferrer">this demo</a> 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 <a href="https://chat.stackoverflow.com/rooms/">SO chat)</a>. 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?</p>