CSS 溢出未按预期工作，无法滚动到 div 的底部
CSS overflow not working as expected and unable to scroll to bottom of div
我的目标是设置一个带有粘性 header 和左侧边栏以及可以滚动的 non-sticky DashboardBody（green-bordered 框）的布局（在这种情况下，顶部的内容会消失 "under" 粘性 header）。我正在使用 styled-components，header 下的两个框被包裹在使用 flexbox 的 BelowNavContainer 中。
组件 ProjectContainer 包含整个视图（包括 header 和边栏）。因为我只想要 DashboardBody 部分的滚动条，所以我为此设置了 overflow: auto，为 ProjectContainer 设置了 overflow: hidden。然而，这会导致用户无法看到 DashboardBody 的底部 - 滚动条的底部（带有向下的箭头）也不可见。
如果我为 ProjectContainer 设置 overflow: auto，则会添加一个额外的滚动条，我可以使用这两个滚动条滚动到 DashboardBody 的底部。但显然，我只想要一个滚动条。
我做错了什么，我该如何解决？
我查看了相关的 "overflow not working" 问题。他们的解决方案不起作用，因为我已经指定了 height 值。
工作演示：https://codesandbox.io/s/overflow-woes-i4dww
注意：好像是CodeSandbox本身给view加了一个滚动条，所以我觉得最外面的可以忽略。在我自己的机器上使用 webpack-dev-server（来自 create-react-app），我的滚动条比 CodeSandbox 显示的少一个。
我希望 DashboardBody 有一个滚动条，可以让我滚动到 div 的底部。我只希望这个组件有一个滚动条，即滚动条不应该在 header.
旁边的屏幕顶部开始
目前，如果不向其封闭的 div、ProjectContainer.
添加另一个滚动条，我似乎无法到达其滚动条的底部
您的页眉高度为 100px，下面的内容为 100vh（表示整个屏幕）。
如果你想在不使用另一个滚动条的情况下实现底部，你应该将内容高度更改为：calc(100vh - 100px)。是您要找的吗？
问题出在 BelowNavContainer 组件上。
您已将其高度设置为 100vh，但请注意其上方有 header，因此现在整页的总高度为：
header 高度 + 100vh（低于 NavContainer 高度）。
当您将 parent 组件：ProjectContainer 高度设为 100%，overflow: hidden，这将隐藏 DashboardBody 组件的底部。
解决方案：
将BelowNavContainer的高度设置如下：
height: calc(100vh - 100px)
作为100px:is你的header
的高度
我的目标是设置一个带有粘性 header 和左侧边栏以及可以滚动的 non-sticky DashboardBody（green-bordered 框）的布局（在这种情况下，顶部的内容会消失 "under" 粘性 header）。我正在使用 styled-components，header 下的两个框被包裹在使用 flexbox 的 BelowNavContainer 中。
组件 ProjectContainer 包含整个视图（包括 header 和边栏）。因为我只想要 DashboardBody 部分的滚动条，所以我为此设置了 overflow: auto，为 ProjectContainer 设置了 overflow: hidden。然而，这会导致用户无法看到 DashboardBody 的底部 - 滚动条的底部（带有向下的箭头）也不可见。
如果我为 ProjectContainer 设置 overflow: auto，则会添加一个额外的滚动条，我可以使用这两个滚动条滚动到 DashboardBody 的底部。但显然，我只想要一个滚动条。
我做错了什么，我该如何解决？
我查看了相关的 "overflow not working" 问题。他们的解决方案不起作用，因为我已经指定了 height 值。
工作演示：https://codesandbox.io/s/overflow-woes-i4dww
注意：好像是CodeSandbox本身给view加了一个滚动条，所以我觉得最外面的可以忽略。在我自己的机器上使用 webpack-dev-server（来自 create-react-app），我的滚动条比 CodeSandbox 显示的少一个。
我希望 DashboardBody 有一个滚动条，可以让我滚动到 div 的底部。我只希望这个组件有一个滚动条，即滚动条不应该在 header.
目前，如果不向其封闭的 div、ProjectContainer.
您的页眉高度为 100px，下面的内容为 100vh（表示整个屏幕）。 如果你想在不使用另一个滚动条的情况下实现底部，你应该将内容高度更改为：calc(100vh - 100px)。是您要找的吗？
问题出在 BelowNavContainer 组件上。
您已将其高度设置为 100vh，但请注意其上方有 header，因此现在整页的总高度为：
header 高度 + 100vh（低于 NavContainer 高度）。
当您将 parent 组件：ProjectContainer 高度设为 100%，overflow: hidden，这将隐藏 DashboardBody 组件的底部。
解决方案：
将BelowNavContainer的高度设置如下：
height: calc(100vh - 100px)
作为100px:is你的header
的高度