Html 用CSS/Flexbox填充页面的整个视图

高度仍然让我困惑，何时何地放置它

标题
导航
主要的
页脚
身体，
html{
身高：100%；
保证金：0；
}
.包装纸{
显示器：flex；
柔性包装：包装；
标题{
背景：红色；
弹性：0.100%；
}
导航{
背景：蓝色；
弹性：05%；
}
.主包装{
背景：灰色；
显示器：flex；
弹性：095%；
柔性包装：包装；
主要{
背景：黄色；
弹性：0.100%；
}
页脚{
背景：darkorange；
弹性：0.100%；
}
}
}

我试图实现的是，所有区域都将填满整个屏幕（没有滚动条）

我希望页眉最大为25%。页脚可能是25%（尽管我仍然不确定是否希望始终显示页脚）

如果在内容超过屏幕大小时，导航和主内容中的任何一个都应该有滚动条。

body，
html{
高度：100vh；
保证金：0；
}
.包装纸{
显示器：flex；
柔性包装：包装；
标题{
背景：红色；
弹性：0.100%；
高度：100px；
}
导航{
背景：蓝色；
弹性：05%；
}
.主包装{
背景：灰色；
显示器：flex；
弹性：095%；
柔性包装：包装；
主要{
背景：黄色；
弹性：0.100%；
最小高度：计算（100vh-200px）；
溢出：自动；
}
}
页脚{
背景：darkorange；
弹性：0.100%；
高度：100px；
}
}

标题
导航
主要的
页脚

为什么不将该

100vh

传递给孩子们，并根据自己的喜好设置身高百分比

body，html{
高度：100vh；
保证金：0；
}
.包装纸{
显示器：flex；
柔性包装：包装；
高度：100vh；
}
标题{
背景：红色；
弹性：0.100%；
最高高度：25%；
身高：25%；
}
导航{
背景：蓝色；
弹性：05%；
身高：75%；
}
.主包装{
背景：灰色；
显示器：flex；
弹性：095%；
柔性包装：包装；
身高：75%；
}
主要{
背景：黄色；
弹性：0.100%；
身高：75%；
溢出y：自动；
}
页脚{
背景：darkorange；
弹性：0.100%；
身高：25%；
最高高度：25%；
}

标题
导航
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责
<div id="app"> 
     <div className="wrapper">
        <header>Header</header>
        <nav>
              Nav
          </nav>
        <div className="main-wrapper">
          <main>
            main
          </main>
          <footer>
            footer
          </footer>
        </div>
      </div>
</div>



body,
html {
  height: 100%;
  margin: 0;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    header {
      background: red;
      flex: 0 0 100%;
    }

    nav {
      background: blue;
      flex: 0 0 5%;
    }

    .main-wrapper {
      background: gray;
      display: flex;
      flex: 0 0 95%;
      flex-wrap: wrap;
      main {
        background:  yellow;
        flex: 0 0 100%;
      }

      footer {
        background: darkorange;
        flex: 0 0 100%;
      }
    }
}