CSS 溢出未按预期工作，无法滚动到 div 底部

Posted 2023-03-06

技术标签:

【中文标题】CSS 溢出未按预期工作，无法滚动到 div 底部【英文标题】：CSS overflow not working as expected and unable to scroll to bottom of div 【发布时间】：2019-11-09 19:21:07 【问题描述】：

我的目标是设置一个带有粘性标题和左侧边栏的布局，以及可以滚动的非粘性DashboardBody（绿色边框框）（在这种情况下，顶部的内容会消失“下“粘性标题）。我正在使用 styled-components，标题下的两个框被包裹在使用 flexbox 的 BelowNavContainer 中。

组件ProjectContainer 包围了整个视图（包括标题和侧边栏）。因为我只想要DashboardBody 部分上的滚动条，所以我为此设置了overflow: auto，为ProjectContainer 设置了overflow: hidden。但是，这会导致用户无法看到 DashboardBody 的底部 - 滚动条的底部（带有向下的箭头）也不可见。

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

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

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

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

注意：似乎 CodeSandbox 本身在视图中添加了一个滚动条，所以我认为最外面的可以忽略。在我自己的机器上使用 webpack-dev-server（来自 create-react-app），我的滚动条比 CodeSandbox 显示的少一个。

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

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

【问题讨论】：

添加呈现的 html 和 CSS 来演示问题可能很有用。这是example。我为你想出了一个解决方案，但是类名在刷新时会发生变化，使得修改后的演示变得不必要的乏味。在问题本身中发布编译代码总是更好。感谢@showdev 的反馈，我对这个菜鸟问题不好，但为了将来参考，如果我在代码沙箱或类似的游乐场中编写代码，我将如何去做？不用担心。我认为这可能取决于您使用的浏览器。我在浏览器的开发人员控制台中处理了元素检查器中的 HTML，然后复制了generated stylesheet。对于未来的兴趣，请参阅Tools to selectively copy HTML+CSS+JS from existing sites。 【参考方案1】：

您的标题有 100px 高度，下面的内容有 100vh（表示整个屏幕）。如果要在不使用另一个滚动条的情况下达到底部，则应将内容高度更改为：calc(100vh - 100px)。是你要找的吗？

【讨论】：

【参考方案2】：

问题在于BelowNavContainer 组件。

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

标头高度 + 100vh（BelowNavContainer 高度）。

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

解决办法：

把BelowNavContainer的高度如下： height: calc(100vh - 100px)

as 100px: 是你标题的高度

你可以see this wrking demo

【讨论】：