如何在react中制作粘性页脚？

IT技术 css reactjs footer react-jsx jsx
2021-05-13 00:29:07

我制作了一个粘性页脚高级组件，将其他组件包裹在其内部：

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

4个回答

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

在您的页脚组件中包含一个幻影 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

更简单的想法（跟随趋势），我同时导入了 bootstrap 和 reactstrap，使用了 bootstrap 固定的底层类和像这样的解决方法。

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

有一个更简单的方法。我正在用 React 创建一个投资组合网站，我的一些页面不是很长，所以在某些设备中，例如 kindle fire hd，页脚不会粘在底部。当然，以传统方式设置它是行不通的，因为它会被包裹在那里。我们不希望那样。所以这就是我所做的：

在 App.js 中：

import React, { Component } from 'react';
import {Header} from './components/Header';
import {Main} from './components/Main';
import {Footer} from './components/Footer';

class App extends Component {
    render() {
        return (
            <div className="App Site">
                <div className="Site-content">
                    <div className="App-header">
                        <Header />
                    </div>
                    <div className="main">
                        <Main />
                    </div>
                </div>
                <Footer />
            </div>
        );
    }
}

export default App;

然后在 _sticky-footer.css （我使用 POSTCSS）：

:root {
    --space: 1.5em 0;
    --space: 2em 0;
}

.Site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.Site-content {
    flex: 1 0 auto;
    padding: var(--space) var(--space) 0;
    width: 100%;
}

.Site-content:after {
    content: '\00a0';
    display: block;
    margin-top: var(--space);
    height: 0;
    visibility: hidden;
}

最初的解决方案是由 Philip Walton 创建的：https : //philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

您可以通过添加margin-bottom: 60px;到body您网站的来解决此问题。随着60px你的页脚的高度。

其它你可能感兴趣的问题
上一篇如何去除PLA上的白色痕迹 下一篇分辨率缺点