使侧边栏（在 React 中）即使在滚动时也占据页面高度的 100%
Make sidebar (in React) take up 100% of the height of the page even when there's scrolling
我的应用程序中的大部分页面都适合视口，所以到目前为止我一直在为我的 <SideNav /> 组件使用 height: 100vh。但是现在我的几个页面滚动，这破坏了侧边栏的功能，因为它在您开始滚动时突然结束。
然而 height: 100% 也不起作用，事实上侧边栏最终变得更短。如何使侧边栏始终伸展整个页面的长度？我想避免使用 position: absolute 因为这将需要在我的其余内容上设置一堆固定的左边距。
请注意，我使用的是带有样式组件的 React。
使用粘性侧边栏让侧边栏在页面滚动时保持静止。这可以使用 CSS 或通过实施反应组件来完成。
可以这样使用css实现：
position: -webkit-sticky;
position: sticky;
top: 0;
这适用于顶部栏导航，但您可以确定哪些元素在您的组件中是粘性的。 https://www.npmjs.com/package/react-sticky
我的应用程序中的大部分页面都适合视口，所以到目前为止我一直在为我的 <SideNav /> 组件使用 height: 100vh。但是现在我的几个页面滚动，这破坏了侧边栏的功能，因为它在您开始滚动时突然结束。
然而 height: 100% 也不起作用，事实上侧边栏最终变得更短。如何使侧边栏始终伸展整个页面的长度？我想避免使用 position: absolute 因为这将需要在我的其余内容上设置一堆固定的左边距。
请注意，我使用的是带有样式组件的 React。
使用粘性侧边栏让侧边栏在页面滚动时保持静止。这可以使用 CSS 或通过实施反应组件来完成。
可以这样使用css实现：
position: -webkit-sticky;
position: sticky;
top: 0;
这适用于顶部栏导航，但您可以确定哪些元素在您的组件中是粘性的。 https://www.npmjs.com/package/react-sticky