CSS Sticky - 如何粘在一边以填充可用高度?

CSS Sticky - How to sticky aside to fill available height?

我想创建网格布局,我想放在一边粘在 top: 0 上并填充所有剩余的高度,例如100% 的高度,当我向下滚动时,我需要将高度更改为 100% 减去页脚高度。不用JS也能搞定?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-areas: "aside content"
    "footer footer";
  grid-template-columns: 20rem 1fr;
}

aside {
  grid-area: aside;
  background-color: red;

}
nav {
  font-size: 2rem;
  color: black;
  position: sticky;
  top: 0;
  
  height: 100%;
  background-color: yellow;
}
main {
  grid-area: content;
  background-color: green;
  height: 150vh;
}
footer {
  grid-area: footer;
  background-color: blue;
  height: 10rem;
}

ul {
  list-style: none;
}
<div class="grid">
  <aside>
  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </nav></aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>

height:100%替换为min-height:100vh

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-areas: "aside content"
    "footer footer";
  grid-template-columns: 20rem 1fr;
}

aside {
  grid-area: aside;
  background-color: red;

}
nav {
  font-size: 2rem;
  color: black;
  position: sticky;
  top: 0;
  
  min-height:100vh;
  background-color: yellow;
}
main {
  grid-area: content;
  background-color: green;
  height: 150vh;
}
footer {
  grid-area: footer;
  background-color: blue;
  height: 10rem;
}

ul {
  list-style: none;
}
<div class="grid">
  <aside>
  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </nav></aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>