如何将元素粘贴到视口顶部并填充视口'；s可用的垂直空间——没有JavaScript？

我有一个导航侧边栏，当用户向下滚动时，我想将其粘贴到页面顶部。如果视口中的链接太多，我希望元素溢出，以便用户可以在其中滚动以单击链接，还可以粘贴到视口底部，以便可以访问所有链接

我可以通过使用

position:sticky

将元素粘贴到视口顶部，然后使用

getBoundingClientRect（）

根据其当前位置约束其

最大高度来实现这一点。像这样：

#element {
  /* Stick the element to the top of the viewport as the user scrolls down */
  position: sticky;
  top: 0;
  /* Overflow by scrolling within the element */
  overflow-y: auto;
}

这确实有效，但是调用
getBoundingClientRect（）
代价很高，尤其是在每个滚动上。限制事件会导致屏幕抖动分散注意力

有没有一种纯粹的CSS方法可以实现这一点

编辑：这个JSFIDLE演示了我想要实现的目标：

请注意，最初左侧导航在视口底部结束。向下滚动时，左侧导航的高度会增加，直到到达顶部。但是它仍然固定在底部。
我对这个问题有点困惑，但这里有一个粘性的侧边栏：

我只是使用了
位置：sticky
，顶部为0

，最大高度为100vh

如果这对您不起作用，那么如果您包含一个运行的代码片段，那么我们就可以看到您尝试做了什么，并从那里开始工作，那么获得一个对您有效的答案就会容易得多

正文{
/*我有这个设置，所以没有任何上/下边距，所以100vh实际上对应于页面的大小*
*这里有一些关于移动浏览器奇怪实现的警告。
*/
保证金：0；
}
#容器{
/*这将设置列，以便div并排呈现。第一列是导航栏的宽度（最大内容），第二列是页面的其余部分*/
显示：网格；
网格模板列：最大内容1fr；
}
#元素{
/*当用户向下滚动时，将元素粘贴到视口顶部*/
位置：粘性；
排名：0；
/*通过在元素内滚动而溢出*/
溢出y：自动；
/*使导航栏具有基于屏幕大小的最大高度*/
最大高度：100vh；
/*这样我们就可以看到导航栏的大小*/
背景色：青色；
}
#内容{
/*我太懒了，无法获取大量的lorem ipsum文本，所以这里有一些页面的虚假内容*/
高度：300vh；
}

测试

测试2
测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2

测试

测试2


这里的内容真的很长吗？

感谢您的回复。我添加了一个JsFiddle。这种方法的问题是，在列表位于顶部之前，无法访问列表末尾的链接。也就是说，当列表不在视口顶部时，将其高度设置为100vh意味着某些内容位于视口下方，用户无法滚动访问它。

document.addEventListener('scroll', () => {
  // Keep the element entirely in the viewport (so users can access all links by scrolling)
  // by limiting the element's max-height.
  const element = document.getElementById('element');
  const elementTop = element.getBoundingClientRect().top;
  element.style.maxHeight = 'calc(100vh - ' + elementTop + 'px);';
});