CSS 如何在反应中制作粘性页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40515142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a sticky footer in react?
提问by Poliakoff
I've made a sticky footer higher-level component that wraps other components inside itself:
我制作了一个粘性页脚高级组件，将其他组件包裹在其内部：
Footer.js
页脚.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;
Usage:
用法：
<Footer><Button>test</Button></Footer>
But it is hiding the contents of the page:
但它隐藏了页面的内容：
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 demothe 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?
这看起来是一个常见的问题，所以我搜索了一下，发现了这个问题，其中 FlexBox 推荐用于粘性页脚。但是在这个演示中，页脚位于页面的最底部，而我需要页脚始终显示在页面上，并且内容在上述区域内滚动（如在SO chat 中）。除此之外，还有一个建议是使用自定义样式表规则更改所有其他组件。是否可以仅使用样式化页脚组件来实现我需要的功能，以便代码保持模块化？
回答by jacoballenwood
Here's an idea(sandbox example link).
这是一个想法（沙盒示例链接）。
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';).
在您的页脚组件中包含一个幻影 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
回答by Maria Campbell
There is a much simpler way. I am creating a portfolio site with React, and some of my pages are not very long, so in some devices, like kindle fire hd for example, the footer would not stick to the bottom. And of course to set this up in the traditional fashion with would not work, because the would be wrapped in there. And we don't want that. So this is what I did:
有一个更简单的方法。我正在用 React 创建一个作品集网站，我的一些页面不是很长，所以在某些设备中，例如 kindle fire hd，页脚不会粘在底部。当然，以传统方式设置它是行不通的，因为它会被包裹在那里。我们不希望那样。所以这就是我所做的：
In App.js:
在 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;
And then in _sticky-footer.css (I use POSTCSS):
然后在 _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: 'class AppFooter extends Component{
render() {
return(
<div className="fixed-bottom">
<Navbar color="dark" dark>
<Container>
<NavbarBrand>Footer</NavbarBrand>
</Container>
</Navbar>
</div>
)
}
a0';
display: block;
margin-top: var(--space);
height: 0;
visibility: hidden;
}
The original solution for this was created by Philip Walton: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
最初的解决方案是由 Philip Walton 创建的：https: //philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
回答by Nicolas Silva
Much easier idea (following the trend), i imported both bootstrap and reactstrap, used the bootstrap fixed bottom class and workaround with that like this.
更简单的想法（遵循趋势），我同时导入了 bootstrap 和 reactstrap，使用了 bootstrap 固定的底层类和像这样的解决方法。
{
padding-top: 50vh;
}
回答by Leon
You can fix this by adding margin-bottom: 60px;to the bodyof your website. With the 60pxbeing the height of your footer.
您可以通过添加margin-bottom: 60px;到body您网站的来解决此问题。随着60px你的页脚的高度。
回答by Aaron Pennington
I wanted to share this solution that worked. I cribbed this from https://react.semantic-ui.com/modules/sticky. Scroll to the bottom of this page and inspect the text 'This is the bottom' to see where I stole it. Its a site built on react so it should work for your situation.
我想分享这个有效的解决方案。我从https://react.semantic-ui.com/modules/sticky抄录了这个。滚动到此页面的底部并检查文本“这是底部”以查看我偷它的地方。它是一个建立在 react 上的网站，所以它应该适合你的情况。
Here it is:
这里是：
.App {
height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
Conceptually, this solution is creating negative space like jacoballenwood's phantom div to push the footer down to the bottom and stick it there. Just add it to your css style class for the footer and adjust the value to taste.
从概念上讲，此解决方案正在创建负空间，例如 jacoballenwood 的 phantom div，将页脚向下推到底部并将其粘贴在那里。只需将其添加到页脚的 css 样式类中，然后调整值即可。
回答by lukem
.App will be the main component you load to your Root.
.App 将是您加载到 Root 的主要组件。
Assume that the footer is the last child of .App in the document flow
假设页脚是文档流中 .App 的最后一个孩子
##代码##