I have a React web page that I'm building where the structure uses React Router Dom to route pages, and I have a footer and header on the site. The basic structure in my App.js is:

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;

The goal is to have the top navbar, which is the <Menu /> component on top, and a footer which is the <Footer /> component on the bottom. Both the top menu and bottom footer are meant to be dynamic in height (they change depending on screen size). The goal is to have each "page" component fit perfectly (centered) in between the footer and header. What I have right now in each page is something like what I have in this 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;

However, this tends to give me a bit too much scroll room on desktop, and a short div on mobile. Is there a way to ensure that everything fits between the header and footer perfectly unless the page is longer and actually needs to scroll because of the content inside of the page? And just have a minimum height/width where everything is centered otherwise, with no scrolling?