我的目标是设置一个带有粘性标题和左侧边栏以及非粘性的布局 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
.
最佳答案
问题出在 BelowNavContainer
组件上。
您已将其高度设置为 100vh,但请注意其上方有页眉,因此现在整页的总高度为:
header 高度 + 100vh(低于 NavContainer 高度)。
当您将其父组件:ProjectContainer
高度设置为 100%、overflow: hidden
时,这将隐藏 DashboardBody 组件的底部。
解决方案:
将 BelowNavContainer
的高度放置如下:
高度:计算(100vh - 100px)
因为 100px: 是标题的高度
关于CSS 溢出无法按预期工作并且无法滚动到 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56796639/