滚动条到CSS网格单元格,第一个将其垂直扩展到可用空间

作为我上一个问题的延续 How to get a scrollbar for content with a sticky header and footer using CSS Grid layout? (啊,真是个标题!)我试着在固定一些元素的时候钻一个滚动条,同时仍然保持粘性的页眉和页脚。

这与前面的问题非常吻合,但似乎我还没有学好。我可能错了,但我似乎很难理解 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. 如何使内容区域填充“其余”的视区,并创建一个有粘性页眉和页脚的效果?

我和其他人一起读了这篇文章 CSS Grid Gotchas And Stumbling Blocks 通过 雷切尔·安德鲁 我(可能)需要将某个容器设置为固定大小,但我不确定是否如此,因为滚动条在没有它的情况下也会出现(尽管这可能正是问题所在,因为现在它总是可见的)。这个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元素,现在看起来

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

}

这种感觉 符合逻辑的 因为在默认情况下(我需要检查这个规范),元素占用的空间最少。稍后我会检查关于“Mault”的内容,我认为设置页脚和标题的最大大小就足够了,所以除了填充之外,没有其他选择可以不留空格了。