在花了太多时间为我在许多项目上使用而没有问题的简单粘性侧边栏组件的痛苦苦恼之后，我确定了导致其他问题的部分解决方案。
此侧边栏利用flexbox将侧边栏保持在适当位置，并像页面正文一样对待容器div。
不幸的是，当我在Vue.js中开始使用它时，它就崩溃了。我最初认为是因为元素高度没有响应动态填充的内容，但事实并非如此。
包装器结构如下：
<html>
<body>
<div class="wrapper">
<div id="sidebar>
</div>
<div class="container">
</div>
</div>
</body>
</html>
和CSS：
html {
position: relative;
height: 100%;
box-sizing: border-box;
width: 100%;
overflow-x: hidden;
height: 100%;
}
body {
overflow-x: hidden;
margin: 0;
min-height: 100%;
position: relative;
background-size: 100vw 100vh;
background-attachment: fixed !important;
width: 100%;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
height: 100vh;
position: sticky;
position: -webkit-sticky;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
NB：通过将body高度设置为100％，我确实成功地使侧边栏看起来像是在粘住，但实际链接仍然滚动，即使您可以看到侧边栏。此外，这破坏了网站上最重要的页面之一上使用的Flatpickr日期选择器的布局属性。显然，这不是一个可行的解决方案，因为可见但无交互的侧边栏是无用的，并且我需要我的页面才能正常工作。
要明确-我选择使用sticky而不是fixed，因为我想利用flexbox在侧边栏旁边有效地设置页面内容的容器，而不是简单地将其推到上方使用边距以防止其被侧边栏覆盖。
这是一个（混乱的，我很抱歉，它是从一个更大的大型项目中抽出的）Codesandbox，以便在上下文中显示侧边栏。