[解決済み] reactでスティッキーフッターを作るには？

質問

スティッキーフッターの上位コンポーネントで、それ自身の中に他のコンポーネントをラップするものを作りました。

フッター.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;

使用方法

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

しかし、ページの中身を隠しているのです。

これはよくある問題のようなので、ちょっと検索してみたら この問題 フッターのスティッキーはFlexBoxが推奨されています。しかし このデモ フッターはページの一番下にありますが、フッターは常にページ上に表示され、コンテンツは上記の領域内でスクロールされる必要があります (例. SOチャット) . さらに、カスタムスタイルシートルールで他のすべてのコンポーネントを変更するようにとのアドバイスがあります。フッターコンポーネントだけにスタイルを適用して、私が必要とするものを実現することは可能でしょうか。

解決方法は？

こんなアイデアもあります (サンドボックスの例リンク)。

フッターコンポーネントに、他の dom 要素が尊重するフッターの位置を表す幻の div を含める (すなわち 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>
            <div style={phantom} />
            <div style={style}>
                { children }
            </div>
        </div>
    )
}

export default Footer