滚动到CSS网格单元格，首先将其垂直拉到可用空间

Question

作为我上一个问题How to get a scrollbar for content with a sticky header and footer using CSS Grid layout?的继续（phe，真是一个标题！），我试图研究固定一些元素以具有滚动条，同时仍保持粘性页眉和页脚的概念

这与上一个问题非常接近，但是看来我还不太了解。我可能是错的，但是看来我在理解grid-template-columns: repeat指令时遇到了麻烦，因为现在我看不到对内容区域的掌握。我希望整个主要内容区域填满所有可用空间，并只有在有足够的内容值得保证时才显示滚动条。换句话说，我想创建（再次）粘贴的页眉和页脚以及可滚动的内容区域，但是这次有所不同。 ：）

我有一支笔here，它是文章How to Build an Off-Canvas Navigation With CSS Grid中描述的代码的分支。

我仅通过添加对分叉代码进行了少量修改

.container section {
    overflow-y: scroll;
    height: max-height;
}

使滚动条始终显示在内容区域，即使内容不会填充整个区域。除此之外，另一个问题是滚动条始终可见。

问题：

1. 如何仅在内容区域中的垂直空间用尽时使滚动条可见？
2. 如何使内容区域填充视口的“其余部分”，并在存在粘性页眉和页脚的地方创建效果？

我阅读了 Rachel Andrew 的文章CSS Grid Gotchas And Stumbling Blocks，并发现我（也许）需要将一些容器设置为固定大小，但是我不确定，因为滚动条也确实没有显示（尽管这可能正是问题所在，因为它现在始终可见）。该CSS看起来也比起初链接的CSS更通用（也许更有效？），因此有希望进一步探索这一问题。

无论如何，目前看来我已经精疲力尽了。因此，请帮助/ guidande / pointers / just代码进行查看。 ：）

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr min-content;
    grid-gap: 10px;
}

.container section {
    overflow-y: auto;
}

为了显示section元素占据所有空间或向下推动页脚以停留在屏幕下端的含义，我看到了

％lt; edit：一种快捷方式，可以通过在容器元素中添加min-height: 100vh来消除“奇数间隙”，现在看起来像

.container {
  display: grid;
  grid-template-columns: 1fr;  
  grid-gap: 10px;
  min-height: 100vh

}

这是逻辑的感觉，因为默认情况下（我需要检查其规格），元素占据的空间最小。稍后我将检查有关“主”的内容，我认为为页脚和标题设置最大大小就足够了，因此除了填充以免留下空白之外，主别无其他选择。 / p>