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

Question

我想创建网格布局，并且我想将其粘在 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>

Answer 1

将 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>