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

Question

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

App.scss

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

App.tsx

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

NavigationBar.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;
}

UploadPageComponent.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%;
     }
}

FooterComponent.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%;
}

Answer 1

您可以使用 flex-grow 来扩展一些内容。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav></nav>
    <main></main>
    <footer></footer>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        min-height: 100vh;
    }

    nav,main,footer{
        padding: 1em;
    }

    nav{
        background-color: yellow;
    }

    main{
        background-color: rgb(0, 82, 171);
        flex-grow: 1;
    }

    footer{
        background-color: green;
    }

    body{
        display: flex;
        flex-direction: column;
    }

</style>
</html>

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

css resize content to fill the height

css

flexbox

responsive-design