即使在滚动时，也使侧边栏（在 React 中）占据页面高度的 100%

Posted 2023-02-22

【中文标题】即使在滚动时，也使侧边栏（在 React 中）占据页面高度的 100%

【英文标题】：Make sidebar (in React) take up 100% of the height of the page even when there's scrolling

【发布时间】：2020-01-01 00:36:01

【问题描述】：

我的应用程序中的大多数页面都适合视口，所以到目前为止，我一直使用height: 100vh 作为我的<SideNav /> 组件。但是现在我的几个页面滚动了，这破坏了侧边栏的功能，因为它在您开始滚动时突然结束。

但是height: 100% 也不起作用，实际上侧边栏最终变得更短。如何使侧边栏始终拉伸页面的整个长度？我想避免使用position: absolute，因为这需要在我的其余内容上设置一堆固定的左边距。

请注意，我正在使用带有样式组件的 React。

【问题讨论】：

这不是一个真正的 React 问题。您可能应该发布您呈现的 html 和任何相关的 CSS。

您是否尝试过在主要内容滚动时让侧边栏保持粘性？

【参考方案1】：

使用粘性侧边栏在页面滚动时保持侧边栏静止。这可以使用 CSS 或通过实现一个反应组件来完成。

可以像这样使用css实现：

position: -webkit-sticky;
position: sticky;
top: 0;

这适用于顶栏导航，但您可以确定哪些元素在您的组件中具有粘性。 https://www.npmjs.com/package/react-sticky

【讨论】：

剩下的一个问题是，如果我打开 Devtools（停靠在底部），然后重新加载页面，然后关闭 Devtools，侧边栏不会一直到底部.我认为这是 100vh 的固有问题，但我不确定是否有解决办法。

您的用户是否会在使用您的网站/应用程序时打开开发工具并关闭它们？看起来很具体。上网时我很少调整浏览器的大小。我只在开发过程中调整大小。不同尺寸打开后是否好看？

即使他们不这样做，我也发现了 100vh 的另一个问题。页面上位于视口之外的任何内容都不会针对侧边栏计算其边距/填充，而是针对页面左侧（因为从技术上讲，侧边栏在加载时不存在于视口之外）。是否没有我可以使用的 CSS 属性或函数来确保侧边栏实际上占据了页面内容的整个高度？