Ich habe diesen Teil des Codes vor einiger Zeit geschrieben und nachdem ich an anderen Seiten gearbeitet habe, ist mir dieses seltsame Verhalten aufgefallen.
Ich habe versucht, das CSS zu ändern, um zu erzwingen, dass die Komponentenfußzeile und die Hauptkomponente die Breite ausfüllen, aber es hat nicht funktioniert. Ich habe auch versucht, sie in ein Div einzuschließen, und das Problem besteht weiterhin
Bitte überprüfen Sie den Screenshot, der das Problem zeigt:
Frageantwort
Sie können den Code hier sehen, aber das Problem wird nicht reproduziert 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 ( <>
Lorem ipsum dolor
Lorem ipsum dolor sit amet
Presentaction
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.
); }
footer.tsx
import "./Footer.css"; export default function Footer() { return ( <> E-mail: fabiolaalba1919@gmail.com
Derechos reservados - 2023
); }
footer.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 { }
这似乎是 SVG 无法完全渲染的问题。我已经更改了它，现在工作正常，尽管我仍然不知道如何使用以前的 SVG 修复它，如果您发现自己遇到此问题，更改 SVG 是解决该问题的方法。