頁腳的一部分會跳到另一個元件上，但只有當頁面在 React 中載入時才會出現

Question

我前一段時間編寫了這部分程式碼，在其他頁面工作後我回來注意到這種奇怪的行為。

我嘗試更改 css 以強制元件頁腳和主元件填充寬度，但它不起作用，也嘗試將它們包裝在 div 中，問題仍然存在

請檢查顯示問題的螢幕截圖：

問題反應

這裡可以看到程式碼，但是問題沒有重現 https://codesandbox.io/s/elegant-bhabha-ns7374?file=/src/main.css

home.tsx

import Footer from "../components/Footer/Footer";
import Menu from "../components/Menu/Menu";
import logoFull from "../assets/RG-Logo-verde.svg";
import "../main.css";

export default function Home() {
  return (
    <>
      <div className="box">
        <div className="row header">
          <Menu selected="home" />
        </div>

        <main className="row content flex-column">
          <div className="homeImage">
            <img src={logoFull} alt="Home Image" />
          </div>
          <div className="row content flex-column">
            <h1 className="bold large-font text-center">
              Lorem ipsum dolor
            </h1>
            <p className="mediun-size">Lorem ipsum dolor sit amet</p>
          </div>
          <div className="presentation">
            <h2 className="bold">Presentaction</h2>
            <p className="mediun-size">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse imperdiet arcu eget blandit eleifend. Proin congue
              erat dui, quis elementum nisl tempor quis. Praesent fringilla
              massa at auctor consequat. Phasellus a fermentum nibh. Praesent
              tincidunt est justo, ac vestibulum quam feugiat imperdiet. Quisque
              facilisis arcu nec metus fermentum, nec vulputate nunc feugiat.
              Praesent placerat diam ullamcorper nisl congue, ut elementum augue
              tempor. Pellentesque id pharetra lorem, eu venenatis urna. Etiam
              quam lorem, malesuada quis volutpat vel, hendrerit vel nisi. Proin
              pretium aliquam elit.
            </p>
          </div>
        </main>

        <footer className="row footer">
          <Footer />
        </footer>
      </div>
    </>
  );
}

頁尾.tsx

import "./Footer.css";

export default function Footer() {
  return (
    <>
      <div className="footer-container">
        <div className="contact-footer">
          <p>Contacto: (+591) 1234567</p>
        </div>
        <div className="email-footer">
          <p>E-mail: fabiolaalba1919@gmail.com</p>
        </div>
        <div className="rights-footer">
          <p>Derechos reservados - 2023</p>
        </div>
      </div>
    </>
  );
}

頁尾.css

.footer-container {
  display: flex;
  flex-direction: row;
}

.email-footer {
  margin: 5px auto;
}

.contact-footer,
.rights-footer {
  margin: 5px 40px;
}

main.css

@font-face {
  font-family: AileronRegular;
  src: url("./assets/font/Aileron-Regular.otf");
}

@font-face {
  font-family: Aileronbold;
  src: url("./assets/font/Aileron-Bold.otf");
}

* {
  font-family: AileronRegular;
}
:root {
  --color-one: #70ae6e;
  --color-two: #ff9b71;
  --bg-gradiant: url("./assets/radiant-gradient1.svg");
  --bg-rose: url("./assets/rose-petals1.svg");
}

body {
  background-image: var(--bg-rose);
  background-attachment: fixed;
  background-size: cover;
}

html,
body,
#root {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
}
.box .row.content .presentation {
  text-align: left;
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto 40px auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

footer {
  background-color: var(--color-one);
  margin-top: auto;
}

a:hover {
  color: var(--color-one);
}

.homeImage img {
  width: 500px;
  margin: 0 auto;
}

main {
  text-align: center;
}
main,
footer,
header {
  width: 100%;
  box-sizing: border-box;
}

.row {
  --bs-gutter-x: 0rem !important;
}

.mediun-font {
  font-size: x-large;
}

.large-font {
  font-size: xxx-large;
}

.bold {
  font-family: Aileronbold;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  margin: 5rem 0;
}

.centered {
  margin: 0 auto;
}

.percented {
  width: 60% !important;
}

.box2-serv {
  width: 30%;
  text-align: left;
}
.box3-serv {
  width: 60%;
  text-align: left;
}

.black-link {
  color: black;
  text-decoration: none;
}

.card-container {
  padding: 2rem;
}

.box-us {
  width: 30%;
  text-align: left;
}

.pad-bot-3 {
  padding-bottom: 3rem;
}

.cont-brand {
}

Answer 1

這似乎是 SVG 無法完全渲染的問題。我已經更改了它，現在工作正常，儘管我仍然不知道如何使用以前的 SVG 修復它，如果您發現自己遇到此問題，更改 SVG 是解決該問題的方法。