如何在反应中制作粘性页脚？
Posted
技术标签:
【中文标题】如何在反应中制作粘性页脚？【英文标题】：How to make a sticky footer in react? 【发布时间】：2017-03-23 17:53:52 【问题描述】：我制作了一个粘性页脚高级组件，它将其他组件包装在自身内部：
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>
但它隐藏了页面的内容：
这似乎是一个常见的问题，所以我搜索了一下，找到了this issue，其中 FlexBox 推荐用于粘性页脚。但是在this demo，页脚位于页面的最底部，而我需要页脚始终显示在页面上并且内容在上述区域内滚动（如SO chat)。除此之外，还有是使用自定义样式表规则更改所有其他组件的建议。是否可以仅使用页脚组件样式来实现我需要的功能，以便代码保持模块化？
【问题讨论】：
【参考方案1】：您可以通过将margin-bottom: 60px; 添加到您网站的body 来解决此问题。 60px 是页脚的高度。
【讨论】：
非常感谢，但不幸的是，这对 React 没有帮助。 不，它确实有效。这正是我解决问题的方式。你可以在这里看到 - frazerk.net/resume.html @FrazerKirkman 你所拥有的不是 OP 所要求的。 OP 需要粘性 div 容器，您的位于底部/非粘性容器。【参考方案2】：Here's an idea（沙盒示例链接）。
在您的页脚组件中包含一个虚拟 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
【讨论】：
即使在 2020 年也可以使用，但如果页脚上方的内容很小，它并不能解决问题。如果您只说页眉 + 正文的 50 像素，页脚将不会粘在底部。【参考方案3】：有一个更简单的方法。我正在使用 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/
【讨论】：
【参考方案4】：我想分享这个行之有效的解决方案。这是我从https://react.semantic-ui.com/modules/sticky 抄来的。滚动到此页面的底部并检查文本“这是底部”以查看我在哪里偷走了它。它是一个基于反应的网站，因此它应该适合您的情况。
这里是：
padding-top: 50vh;
从概念上讲，此解决方案是创建负空间，例如 jacoballenwood 的幻影 div，以将页脚向下推到底部并将其粘贴在那里。只需将其添加到您的 CSS 样式类的页脚并调整值以适应口味。
【讨论】：
【参考方案5】：更简单的想法（顺应潮流），我同时导入了 bootstrap 和 reactstrap，使用了 bootstrap 固定的底层类和像这样的解决方法。
class AppFooter extends Component
render()
return(
<div className="fixed-bottom">
<Navbar color="dark" dark>
<Container>
<NavbarBrand>Footer</NavbarBrand>
</Container>
</Navbar>
</div>
)
【讨论】：
在 IE 11、Chrome 74 和 Edge 14 中完美运行。使用 create-react-app 版本 3.0.1、React v16.8.6、reactstrap v8.0.0 和 bootstrap v4.3.1 另一种方法是将 height: 100vh 放在容器类上，并将页脚放在该容器下方【参考方案6】：.App 将是您加载到根目录的主要组件。
假设页脚是文档流中.App的最后一个孩子
.App
height: 100vh;
display: flex;
flex-direction: column;
footer
margin-top: auto;
【讨论】：
【参考方案7】：我发现如果您将“页脚”组件包装在标准 html 中
<footer>
标签，它几乎为你整理了所有的定位
【讨论】：
【参考方案8】：答案很晚，但有人会发现这很有用。您可以设置工具栏，而不是幻像样式。我已经为组件构建了一些标准布局，其中 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;
【讨论】：
【参考方案9】：.footer
width: 100%;
position: fixed;
bottom: 0;
这应该可以解决问题！干杯! （：
【讨论】：
以上是关于如何在反应中制作粘性页脚？的主要内容，如果未能解决你的问题，请参考以下文章