如何做出反应中的粘性页脚? [英] 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;

用法:

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

但是它隐藏了页面的内容:

But it is hiding the contents of the page:

这似乎是一个常见问题，因此我进行了一些搜索，发现了此问题，建议将FlexBox用于粘页脚.但是在此演示中，页脚位于页面上，而我需要页脚始终显示在页面上，并且内容在上述区域内滚动(例如 SO聊天).除此之外，还建议使用自定义样式表规则更改所有其他组件.仅通过设置页脚组件的样式就可以实现我所需要的，这样代码将保持模块化?

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?

推荐答案

这是个主意(沙盒示例关联).

Here's an idea (sandbox example link).

在页脚组件中包含一个幻影div，该div代表其他dom元素将尊重的页脚位置(即，由于不被position: 'fixed';影响页面流量).

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>
            <div style={phantom} />
            <div style={style}>
                { children }
            </div>
        </div>
    )
}

export default Footer

这篇关于如何做出反应中的粘性页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！