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

【问题标题】：css resize content to fill the heightcss调整内容大小以填充高度
【发布时间】：2021-05-19 02:08:15
【问题描述】：

我的页面上有三个部分：导航栏、内容和页脚。但不幸的是，它没有填满页面的整个高度，这会在页脚下方创建一个空白区域。如何使容器响应地适应导航栏和页脚？我尝试对 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%;
}

【问题讨论】：

首先我建议您不要将 html 高度设置为 100%。在我看来，最好使用最小高度 100vh。我会尝试为您编写一个简单的演示，如果其他人不为我做，您将如何解决您的问题

标签： css flexbox responsive-design

【解决方案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>

【讨论】：

像魅力一样工作，谢谢！过去几年我使用 Angular flex-layout 但我切换到 React 并且需要从头开始学习样式本身^^。为什么建议使用 min-height: 100vh 而不是 height: 100%？
如果您将高度设置为 100%，您的页面将不会随着您的内容而增长，您将不得不处理溢出。但是如果你真的不希望页面增长，那么设置高度就可以了。