如何在React中制作一个固定底部的页脚？

Question

我已经创建了一个粘性页脚高级组件，将其他组件包装在其内部：

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>

但它隐藏了页面的内容：

这看起来是一个常见的问题，所以我搜索了一下，找到了这个问题，推荐使用FlexBox来解决固定页脚。但是在这个演示中，页脚位于页面底部，而我需要页脚始终显示在页面上，并且内容在上面区域滚动（就像在SO聊天室中一样）。除此之外，还建议使用自定义样式表规则更改所有其他组件。是否可能只通过样式化页脚组件来实现我需要的效果，使代码保持模块化？

- Poliakoff

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

---

这个方法即使在2020年仍然有效，但是如果你的页脚上方内容很少，它并不能解决问题。如果你只有50像素的页眉+正文，页脚将无法固定在底部。 - Shane Sepac

Answer 2

更简单的想法（追随潮流），我导入了bootstrap和reactstrap，并使用了bootstrap fixed bottom类，然后进行如下解决。

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

- Nicolas Silva

---

在IE 11、Chrome 74和Edge 14中完美运行。使用create-react-app版本3.0.1，React v16.8.6，reactstrap v8.0.0和bootstrap v4.3.1。 - 4e 69 63 6b

另一种方法是在容器类上放置height: 100vh，并使您的页脚位于该容器下方。 - Nicolas Silva

Answer 3

有一个更简单的方法。我正在使用React创建投资组合网站，我的一些页面不是很长，在某些设备上（例如kindle fire hd），页脚将无法固定在底部。当然，按照传统方式设置这个问题是行不通的，因为footer标签会被包含在内。我们不想要那样。所以我做了这件事：

在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/

- Maria Campbell

Answer 4

你可以通过在你的网站body中添加margin-bottom: 60px;来解决这个问题，其中60px是你footer的高度。

- Leon

---

非常感谢，但遗憾的是这对React没有帮助。 - Poliakoff

不，它是有效的。这正是我解决问题的方法。您可以在此处查看 - http://frazerk.net/resume.html - Frazer Kirkman

@FrazerKirkman，你所提供的并不是OP所要求的内容。OP需要固定的div容器，而你的是在底部或非固定的。 - Rikin

Answer 5

.App将是您加载到根目录的主要组件。

假设页脚是文档流中.App的最后一个子元素。

注：Original Answer翻译成“最初的回答”并不符合上下文，因此未进行翻译。

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

footer {
  margin-top: auto;
}

- lukem

Answer 6

.footer{
width: 100%;
position: fixed;
bottom: 0;
}

这应该就可以解决问题了！干杯！(:

- Han

Answer 7

我发现，如果您将“页脚”组件包装在标准HTML中，则可以将其定位在页面的底部。

<footer>

标签可以帮你解决元素的定位问题。

- George Spyrou

Answer 8

我想分享这个可行的解决方案。我从https://react.semantic-ui.com/modules/sticky借鉴了这个方法。请您滚动到页面底部，检查文本“This is the bottom”以查看我从哪里窃取的。这是一个基于React构建的网站，因此它应该适用于您的情况。

下面就是它：

{
  padding-top: 50vh;
}

从概念上讲，这个解决方案类似于jacoballenwood的幻影div，通过创建负空间将页脚向下推并固定在底部。只需将其添加到页脚的CSS样式类中，并根据需要调整值即可。

- Aaron Pennington

Answer 9

这是我的规则

<footer style={{position:"fixed",bottom:"0"}}>

- Romen Rodríguez

Answer 10

非常晚的回答，但有人可能会发现这很有用。您可以设置工具栏，而不是虚幻样式。我已经为组件构建了一些标准布局，其中{children}是来自父组件App.js的组件。这是一个例子：

import React from "react";
import { Route } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Toolbar from "@material-ui/core/Toolbar";

import Header from "../components/header";
import Footer from "../components/footer";
import SideBar from "../components/sidebar";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  content: {
    flexGrow: 5,
    padding: theme.spacing(3),
  },
}));

const StandardLayout = ({ children }) => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Route path="/" component={Header} />
      </AppBar>
      <SideBar />
      <main className={classes.content}>
        <Toolbar />
        <br />
        {children}
        <Toolbar/>
      </main>
      <AppBar className={classes.appBar}>        
        <Route path="/" component={Footer} />
      </AppBar>
    </div>
  );
};
export default StandardLayout;

- nemostyle