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

问题描述 投票：0回答：13

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

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

css footer reactjs jsx
13个回答
68
投票

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

在页脚组件中包含一个幻像 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
23
投票

更简单的想法（跟随趋势），我导入了 Bootstrap 和 Reactstrap，使用了 Bootstrap 固定底层类并解决了这样的问题。

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

有一个更简单的方法。我正在使用 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/

3
投票

您可以通过将 

margin-bottom: 60px;
添加到网站的 
body
来解决此问题。 
60px
是页脚的高度。

3
投票

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

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

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

footer {
  margin-top: auto;
}
3
投票
.footer{
width: 100%;
position: fixed;
bottom: 0;
}

这应该可以解决问题！干杯! （：

1
投票

我发现如果你将“页脚”组件包装在标准 html 中

<footer>

tag，它几乎帮你整理好了所有的定位

0
投票

我想分享这个有效的解决方案。我从https://react.semantic-ui.com/modules/sticky抄袭了这个。滚动到此页面的底部并检查文本“这是底部”以查看我在哪里偷了它。它是一个基于 React 构建的网站，因此它应该适合您的情况。

这是：

{
  padding-top: 50vh;
}

从概念上讲，这个解决方案正在创建负空间，就像 jacoballenwood 的幻像 div 一样，将页脚向下推到底部并将其粘贴在那里。只需将其添加到页脚的 css 样式类中，并根据需要调整值即可。

0
投票

很晚才回答，但有人会发现这很有用。您可以设置工具栏，而不是幻像样式。我已经为组件构建了一些标准布局，其中 {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;
0
投票

这对我来说是规则

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

只需为根元素设置样式

#root{
  min-height: 100vh;
  display: flex;
  flex-direction: column;}

用于页脚元素

.footer{
  margin-top:auto;
}
0
投票

使用react-bootstrap，你可以直接复制粘贴：

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { Component } from 'react';

export default class MyFooter extends Component {
    render() {
        return (
            <div className="fixed-bottom">
                <Navbar color="dark" dark>
                    <Container>
                        <Navbar.Brand>Footer</Navbar.Brand>
                        <Nav className="me-auto">
                            <Nav.Link href="#">First</Nav.Link>
                            <Nav.Link href="#">Second</Nav.Link>
                        </Nav>
                    </Container>
                </Navbar>
            </div>
        )
    }
}

任何额外需要的东西都可以在 CSS 中自定义。由于导入，它看起来像是大量代码，但它使复制和查看使用的内容变得更容易。

-1
投票

试试这个 html 代码：

/public/index.html

<html lang="en" class="h-100">

<body class="h-100">

  <div id="root" class="d-flex flex-column h-100"></div>
    ...

/src/App.js

<main role='main' className='flex-shrink-0'>

您可以遵循此模板：

react-bootstrap-sticky-footer/public/index.html

react-bootstrap-sticky-footer/src/App.js

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.