在 Reactjs 的底部粘贴页脚

Question

我正在使用 React 开发一个项目，但遇到了一个让我很困惑的问题。

我想添加页脚组件，但它不能正常工作。

所以这是我的代码，当我向下滚动时，我无法弄清楚如何将页脚保留在页面底部。

如果有人有解决方案，如果你能帮助我，那就太好了

当我加载页面页脚组件时，页面底部看起来像这样

但是当我向上滚动时，它看起来像这样

我正在使用 footer.module.css 将这段代码写入不同的页面 (footer.jsx) 并在我的 app.js 中调用

页脚.jsx

import React from "react";
import footerStyles from "../styles/Footer.module.css";
import { FaTwitter, FaFacebook, FaInstagram } from "react-icons/fa";

function Footer() {
    return (
        <div id={footerStyles.copyright}>
            <p>
                &copy; Team NexT LeVeL. All rights reserved. | Design by Team NexT
                LeVeL
            </p>
            <ul className={footerStyles.contact}>
                <li>
                    <a href="/#">
                        <FaTwitter size="2em" color="cyan" />
                    </a>
                </li>
                <li>
                    <a href="/#">
                        <FaFacebook size="2em" color="#00acee" />
                    </a>
                </li>
                <li>
                    <a href="/#">
                        <FaInstagram size="2em" className={footerStyles.insta} />
                    </a>
                </li>
            </ul>
        </div>
    );
}

export default Footer;

我的 footer.module.css 看起来像这样

#copyright {
    margin: 0;
    width: 100%;
    border-top: 20px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    background: #333333;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex: 0 0 25%;
}

#copyright p {
    display: inline;
    letter-spacing: 1px;
    font-size: 16px;
    color: white;
}

#copyright a {
    text-decoration: none;
    color: white;
}

/*footer icon*/
ul.contact {
    list-style: none;
}

ul.contact li {
    display: inline;
    font-size: 1em;
    padding: 10px;
}

ul.contact li span {
    margin: 20px;
}

ul.contact li a {
    color: white;
}

ul.contact li a:before {
    display: inline;
    background: #4c93b9;
    line-height: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
}
.insta {
    border-radius: 10px;
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}

Answer 1

尝试使用

position: fixed; 

而不是

position: absolute;

另外，我建议浮动元素以确保页面的其余部分不会错误地移出：

float: left; 

然后在你的 body 标签底部添加一个高度高于你的页脚的填充，以确保你不会完全覆盖任何东西

body {
    padding-bottom: 100px;
}

Answer 2

遵循这个结构。

const App = () => (
    <div style={{paddingBottom: 50}}>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, molestiae. Magni quibusdam doloremque optio rerum ex assumenda mollitia suscipit praesentium, exercitationem ea perspiciatis aut, voluptatum necessitatibus numquam totam. Commodi distinctio nisi non? Voluptas exercitationem nemo aut rem sint? Recusandae nam quisquam maiores sapiente ratione deleniti, corrupti impedit laboriosam voluptatibus repudiandae qui cumque voluptatem labore necessitatibus sed quidem nemo cum, vitae consequatur rem corporis quibusdam non voluptates quia. Amet ipsum ex, dolore quaerat omnis animi placeat totam alias suscipit eveniet voluptate doloremque nisi repellendus sit incidunt, voluptates ratione ea autem esse maiores, qui quasi? Possimus, velit quibusdam! Natus accusantium voluptatem asperiores.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, molestiae. Magni quibusdam doloremque optio rerum ex assumenda mollitia suscipit praesentium, exercitationem ea perspiciatis aut, voluptatum necessitatibus numquam totam. Commodi distinctio nisi non? Voluptas exercitationem nemo aut rem sint? Recusandae nam quisquam maiores sapiente ratione deleniti, corrupti impedit laboriosam voluptatibus repudiandae qui cumque voluptatem labore necessitatibus sed quidem nemo cum, vitae consequatur rem corporis quibusdam non voluptates quia. Amet ipsum ex, dolore quaerat omnis animi placeat totam alias suscipit eveniet voluptate doloremque nisi repellendus sit incidunt, voluptates ratione ea autem esse maiores, qui quasi? Possimus, velit quibusdam! Natus accusantium voluptatem asperiores.
      </p>
      <Footer/>
    </div>
)
function Footer() {
    return (
        <div style={{
          display:"flex",
          position:"fixed",
          width:"100%",
          height: 50,
          backgroundColor: "grey",
          bottom: 0,
        }}>
            <p>
            &copy; Team NexT LeVeL. All rights reserved. | Design by Team NexTLeVeL
            </p>
            <ul style={{display:"flex"}}>
                <li>
                    <a href="/#">
                        Twitter
                    </a>
                </li>
                <li>
                    <a href="/#">
                        Facebook
                    </a>
                </li>
                <li>
                    <a href="/#">
                        Instagram
                    </a>
                </li>
            </ul>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>