CSS 溢出无法按预期工作并且无法滚动到 div 的底部

Question

我的目标是设置一个带有粘性标题和左侧边栏以及非粘性的布局 DashboardBody (绿色边框框)可以滚动(在这种情况下，顶部的内容会在粘性标题“下方”消失)。我正在使用样式组件，标题下的两个框被包裹在 BelowNavContainer 中那就是使用 flexbox。

组件ProjectContainer包含整个 View (包括标题和侧边栏)。因为我只想要 DashboardBody 上的滚动条部分，我设置了overflow: auto为此和overflow: hidden对于 ProjectContainer .然而，这会导致用户无法看到 DashboardBody 的底部。 - 滚动条的底部(带有向下箭头)也不可见。

如果我设置 overflow: auto对于 ProjectContainer然后添加了一个额外的滚动条，我可以滚动到 DashboardBody 的底部使用这两个滚动条。但显然，我只想要一个滚动条。

我做错了什么，我该如何解决？

我查看了相关的“溢出无效”问题。他们的解决方案不起作用，因为我已经有了 height指定值。

工作演示:https://codesandbox.io/s/overflow-woes-i4dww

注意:好像CodeSandbox本身给view加了一个滚动条，所以我觉得最外面的可以忽略。在我自己的机器上使用 webpack-dev-server(来自 create-react-app)，我的滚动条比 CodeSandbox 显示的少一个。

我希望 DashboardBody有一个滚动条，让我滚动到 div 的底部。我只希望这个组件有一个滚动条，即滚动条不应该从屏幕顶部的标题旁边开始。

目前，如果不向其封闭的 div 添加另一个滚动条，我似乎无法到达其滚动条的底部，ProjectContainer .

Answer 1

问题出在 BelowNavContainer 组件上。

您已将其高度设置为 100vh，但请注意其上方有页眉，因此现在整页的总高度为:

header 高度 + 100vh(低于 NavContainer 高度)。

当您将其父组件:ProjectContainer 高度设置为 100%、overflow: hidden 时，这将隐藏 DashboardBody 组件的底部。

解决方案:

将 BelowNavContainer 的高度放置如下:高度:计算(100vh - 100px)

因为 100px: 是标题的高度

你可以see this wrking demo