Reactjs 页脚页端距离

我在我的页面上添加了一个页脚。当它是一个页面长度时，它覆盖了内容。 页面末端和页脚之间应该有一段距离。 当页面为100%时是可以的，但当页面变长时会发生这种情况

但我想让他们之间保持距离，这是scss

.footer {
  display: flex;
  background-color: #222831;
  min-height: 5vh;
  justify-content: space-between;
  padding: 10px;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

这是我的布局

import React from "react";
import Footer from "./footer";
import Header from "./header";

const Layout = ({ children }) => {
  return (
    <div className="layout">
      <Header />
      <div className="children">{children}</div>
      <Footer></Footer>
    </div>
  );
};

export default Layout;

从“React”导入React；
从“/Footer”导入页脚；
从“/Header”导入标题；
常量布局=（{children}）=>{
返回(
{儿童}
);
};
导出默认布局；

这是我的页脚

import {
  AiFillLinkedin,
  AiFillGithub,
  AiFillInstagram,
  AiOutlineMail,
} from "react-icons/ai";
export default function Footer() {
  return (
    <div className="footer">
      <div className="logo">
        <span className="bracket">{"<"}</span>
        <p>Handcrafted by</p>
        <span className="bracket">{"{"}</span>
        <span className="name">{"ömer"}</span>
        <span className="bracket">{"}"}</span>
        <span className="bracket">{"/>"}</span>
      </div>
      <div className="icons">
        <a href="https://www.linkedin.com/in/omersahin1/">
          <AiFillLinkedin className="icon" size={20} />
        </a>
        <a href="https://github.com/1sahinomer1">
          <AiFillGithub className="icon" size={20} />
        </a>
        <a href="https://github.com/shnomr">
          <AiFillInstagram className="icon" size={20} />
        </a>
        <a href="mailto:1sahinomer1@gmail.com">
          <AiOutlineMail className="icon" size={20} />
        </a>
      </div>
    </div>
  );
}

导入{
艾琳，
艾菲尔吉图布，
AiFillInstagram，
艾尔内迈尔，
}从“反应图标/ai”；
导出默认函数页脚（）{
返回(
{""}
);
}

---

谢谢。

不要使用

位置：已修复
。我应该使用什么？我怎样才能一直在那里修好它？我通常确保身体的最小高度为100vh。有很多方法可以做到这一点；查看此链接：THX谢谢：）