css调整内容大小以填充高度

我的页面上有三个部分：导航栏、内容和页脚。但不幸的是，它没有填满页面的整个高度，这会在页脚下方创建一个空白区域。如何使容器在导航栏和页脚之间响应地适应？我尝试对 UploadPageComponent 进行媒体查询，但没有成功。

应用程序.scss

html, body {
     height: 100%;
}
.App {
     background-color: #F5F5F5;
     font-family: "Open Sans", sans-serif;
}
@media screen and (min-width: 1024px) {
     #root {
          height: 100vh;
     }
}

应用程序.tsx

function App() {
  return (
    <div className="App">
      <NavigationBar />
      <UploadPageComponent />
      <FooterComponent />
    </div>
  );
}

导航栏.scss

.NavigationBar {
     background-image: radial-gradient(circle at 47% 22%,#a8a19e,#76726b);
     box-shadow: 0 2px 8px 0;
     display: flex;
     flex-flow: row;
     height: 3.75em;
     -o-object-fit: contain;
     justify-content: space-between;
     object-fit: contain;
     top: 0;
     width: 100%;
     z-index: 1000;
}

上传页面组件.scss

@media screen and (min-width: 1440px) and (max-width: 1680px) {
     .UploadPageComponent {
          height: 69%;
     }
}
@media screen and (min-width: 680px) and (max-width: 1440px) {
     .UploadPageComponent {
          height: 76%;
     }
}
@media screen and (min-width: 480px) and (max-width: 679px) {
     .UploadPageComponent {
          height: 74%;
     }
}

页脚组件.scss

.FooterComponent {
     background-image: url('../../assets/images/footer-background.png');
     background-size: cover;
     bottom: 0;
     color: #fff;
     display: flex;
     flex-direction: row;
     font-size: 13px;
     min-height: 100px;
     padding: 30px 15px;
     width: 100%;
}