如何在反应中制作粘性页脚？

Question

我制作了一个粘性页脚更高级别的组件，它将其他组件包装在自身内部：

页脚.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 聊天中一样） 。除此之外，还有一个建议是使用自定义样式表规则更改所有其他组件。是否可以仅使用页脚组件样式来实现我需要的功能，以便代码保持模块化？

原文由 Poliakoff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个想法（沙盒示例链接）。

在您的页脚组件中包含一个幻影 div，它代表其他 dom 元素将尊重的页脚位置（即通过不 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

原文由 jacoballenwood 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更简单的想法（顺应潮流），我同时导入了 bootstrap 和 reactstrap，使用了 bootstrap 固定底层类和类似这样的解决方法。

 class AppFooter extends Component{
render() {
    return(
        <div className="fixed-bottom">
            <Navbar color="dark" dark>
                <Container>
                    <NavbarBrand>Footer</NavbarBrand>
                </Container>
            </Navbar>
        </div>
    )
}

原文由 Nicolas Silva 发布，翻译遵循 CC BY-SA 4.0 许可协议