Soy nuevo en reactjs. Probé muchas soluciones, pero no puedo arreglar mi pie de página para que se muestre en la parte inferior de la página web después de mostrar el contenido web. En este escenario, si la página web tiene menos contenido, el pie de página se ubica justo después del final del contenido web, en lugar de ubicarse en la parte inferior. Además, también probé con position:fixed, que prácticamente muestra que el pie de página siempre se pega en la parte inferior de la página, y en algún momento, algunos de los contenidos se ocultaron detrás del pie de página si la página web es larga. ¿Pueden ayudarme a deshacerme de este problema?

 function App() { return ( <div className="App"> <Header></Header> <Routes> <Route path="/" element={<Home></Home>}></Route> <Route path="/home" element={<Home></Home>}></Route> <Route path="/blogs" element={<Blogs></Blogs>}></Route> <Route path="/login" element={<Login></Login>}></Route> <Route path="/register" element={<Register></Register>}></Route> <Route path="*" element={<NotFound></NotFound>}></Route> <Footer></Footer> </div> ); }

 .footer { background-color: #758283; color: white; position: relative; display: flex; justify-content: space-between; padding: 20px 40px; bottom: 0; }