在 Reactjs 底部粘贴页脚

如何解决在 Reactjs 底部粘贴页脚

我正在用 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,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,1);
}
.insta {
    border-radius: 10px;
    background: radial-gradient(
        circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%
    );
}

解决方法

尝试使用

position: fixed; 

代替

position: absolute;

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

float: left; 

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

body {
    padding-bottom: 100px;
}

,

遵循这个结构。

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,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>