我已经看到了所有其他答案，在 React 中与粘性页脚非常挣扎。不会粘在底部

Question

我试图让我的页脚粘在屏幕底部，不覆盖屏幕底部的任何主体元素，但我似乎无法理解。这是我的页脚.js

import React from "react";
import './Stylesheets/Footer.css';
import NavbarBrand from 'react-bootstrap/NavbarBrand';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
class Footer extends React.Component {
state = { clicked: false }
handleClick = () => {
this.setState({ clicked: !this.state.clicked })
}
render() {
return (
<footer className="footerItems">
<div className="phantom"></div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<a href="http://www.github.com" target="_blank"><i class="fab fa-2x fa-github"></i></a>
<a href="http://www.facebook.com" target="_blank"><i class="fab fa-2x fa-facebook-square"></i></a>
<a href="http://www.twitter.com" target="_blank"><i class="fab fa-2x fa-twitter-square"></i></a>
<a href="http://www.instagram.com" target="_blank"><i class="fab fa-2x fa-instagram"></i></a>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
)
}
}
export default Footer

我试图使用幻影<div>来强制一些额外的间距，但这不起作用。这是相应的css文件。

footer {
height: 80px;
margin-top: -200px;
bottom: 0;
z-index: 999;
}
.phantom {
display: 'block';
padding: '20px';
height: '60px';
width: '100%';
}
.footerItems {
position: fixed;
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
height: 100vh;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
color: #080202;
}
.wrapper a:nth-child(2) {
color: white;
}
.wrapper a:nth-child(3) {
color: #1DA1F2;
}
.wrapper a:nth-child(4){
color: #f24f1d;
}
.wrapper i:hover {
margin-top: -3px;
text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

有什么想法或建议吗？？

谢谢

Answer 1

下面是一个使用position: sticky的解决方案。这里需要注意的主要事项是，maindiv至少需要是页面的高度，这样top属性就可以强制它到底部。bottom属性会强制它保持在底部，即使滚动过去也是如此。

这并不能消除页脚对页面高度的影响，因此它可以毫无问题地滚动。

另一件需要注意的事情是，这个解决方案(如所写(是基于提前知道页脚的高度，所以我放置了一个自定义css属性--footer-height: 60px来设置它。

我真的不确定为什么图标和东西没有显示在页脚上，但这是一个不同的问题

const { NavbarBrand, Navbar, Container } = ReactBootstrap;
class Footer extends React.Component {
state = {
clicked: false,
};
handleClick = () => {
this.setState({
clicked: !this.state.clicked,
});
};
render() {
return (
<footer className="footerItems">
<div className="phantom"> </div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<a href="http://www.github.com" target="_blank">
<i class="fab fa-2x fa-github"> </i>
</a>
<a href="http://www.facebook.com" target="_blank">
<i class="fab fa-2x fa-facebook-square"> </i>
</a>
<a href="http://www.twitter.com" target="_blank">
<i class="fab fa-2x fa-twitter-square"> </i>
</a>
<a href="http://www.instagram.com" target="_blank">
<i class="fab fa-2x fa-instagram"> </i>
</a>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
);
}
}
ReactDOM.render(
<div className="main">
<div className="content">Content!</div> <Footer />
</div>,
document.getElementById('root')
);

.main {
min-height: 100vh;
--footer-height: 60px;
}
.content {
height: 100vh;
background: linear-gradient(0deg, green 0%, white 100%);
}
footer {
height: var(--footer-height);
position: sticky;
top: calc(100vh - var(--footer-height));
bottom: 0;
}
.phantom {
display: block;
padding: 20px;
height: var(--footer-height);
width: 100%;
}
.footerItems {
/*position: fixed;*/
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
/*height: 100vh*/
;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<div id="root" />