Une partie du pied de page passe à un autre composant, mais uniquement lorsque la page se charge dans React-Questions et réponses sur le réseau chinois PHP

J'ai écrit cette partie du code il y a quelque temps et après avoir travaillé sur d'autres pages, je suis revenu et j'ai remarqué ce comportement étrange.

J'ai essayé de changer le CSS pour forcer le pied de page du composant et le composant principal à remplir la largeur mais cela n'a pas fonctionné, j'ai également essayé de les envelopper dans un div et le problème persiste

Veuillez vérifier la capture d'écran montrant le problème :

Question réponse

Vous pouvez voir le code ici, mais le problème n'est pas reproduit 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 ( <>   Contacto: (+591) 1234567
 
  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 { }

répondre à tous (1)

P粉2427419212023-09-12 09:56:21 1 plancher

Cela semble être un problème avec le rendu SVG qui n'est pas entièrement rendu. Je l'ai modifié et cela fonctionne bien maintenant, même si je ne sais toujours pas comment le réparer en utilisant le SVG précédent, si vous rencontrez ce problème, changer le SVG est la voie à suivre.