调整初始100vh容器的大小

Question

假设我们有以下布局结构

<div class="full-height>
 <nav>....</nav>
 <section class="hero>...</section>
</div>
<section class="other-content>....</section>

.full-height {
 height: 100vh;
 display: flex;
 flex-direction: column;
 .nav {
  padding: 2rem 5rem;
 }
 .hero {
  background-image: .....;
  background-size: cover;
  flex: 1;
 }
}

我希望nav和.hero部分最初占据视口的整个高度，但是当我调整浏览器的大小时，它应该为其他部分留下空间。< / p>

如果我在父div中包装nav和.hero并将div高度设置为100vh，它会按预期工作，但在调整大小时它将始终占据视口高度的100％。