Tengo una página web de React que estoy construyendo donde la estructura usa React Router Dom para enrutar páginas, y tengo un pie de página y un encabezado en el sitio. La estructura básica en mi App.js es:

 import React, { useState, useRef, useEffect } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import About from './pages/about/about'; import Home from './pages/home/home'; import Contact from './pages/contact/contact'; import Announcements from './pages/announcements/announcements'; import Menu from './menu/Menu'; import ErrorPage from './pages/error/errorPage'; import Footer from './footer/footer'; import { homePath, aboutPath, contactPath, announcementsPath } from './constants'; function App() { return ( <BrowserRouter> <Menu /> <Routes> <Route path={homePath} exact element={<Home />} /> <Route path={aboutPath} element={<About />} /> <Route path={contactPath} element={<Contact />} /> <Route path={announcementsPath} element={<Announcements />} /> <Route path='*' element={<ErrorPage />} /> </Routes> <Footer /> </BrowserRouter> ); } export default App;

El objetivo es tener la barra de navegación superior, que es el componente <Menu /> en la parte superior, y un pie de página que es el componente <Footer /> en la parte inferior. Tanto el menú superior como el pie de página inferior tienen una altura dinámica (cambian según el tamaño de la pantalla). El objetivo es que cada componente de la "página" encaje perfectamente (centrado) entre el pie de página y el encabezado. Lo que tengo ahora mismo en cada página es algo así como lo que tengo en este Home.js:

 import React from 'react'; const Home = (props) => { return ( <div style={{ display: 'flex', justifyContent: 'Right', alignItems: 'Right', minHeight: `calc(100vh - 56px)`, // 56px is roughly what the navbar tends to be in height 'padding-top': '45px' }} > <h1>Home</h1> </div> ); }; export default Home;

Sin embargo, esto tiende a darme demasiado espacio de desplazamiento en el escritorio y una div corta en el móvil. ¿Hay alguna manera de asegurarse de que todo encaje perfectamente entre el encabezado y el pie de página, a menos que la página sea más larga y realmente deba desplazarse debido al contenido dentro de la página? ¿Y solo tener un alto/ancho mínimo donde todo esté centrado de lo contrario, sin desplazamiento?