我已经看到了所有其他答案，在React中确实与Sticky Footer挣扎不会坚持到底

问题描述

我试图使页脚贴到底，而不覆盖屏幕底部的任何身体元素，我似乎无法弄清楚。这是我的footer.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.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.4);
}

有什么想法或建议吗？

谢谢

解决方法

这是使用position: sticky的解决方案。这里要注意的主要事情是，主div必须至少为页面的高度，这样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.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" />