Jquery 为什么overflow:scroll在此界面中不起作用？

根据CSS Tricks（）中关于这类文章的建议，我使用Bootstrap为一个角度驱动的应用程序构建了一个双窗格UI。这两个窗格旨在相互独立地垂直滚动，并从整个页面独立滚动。此行为按照项目最新版本的预期工作，如下所示：（可能需要缩短浏览器窗口，以便在不登录的情况下看到窗格滚动）。如果相关，此版本的应用程序使用SystemJS和Angular 2.0.0-rc5

最近，在我使用Angular CLI对Webpack进行更改并将Angular版本更新为2.2之后，虽然所有HTML保持不变，但这种滚动行为不再有效。请参见此处的“操作”部分：

我有一个代码笔，它将示例视图与应用程序内的视图隔离开来，并且只关注此处的滚动行为：

该笔的相关CSS：

body {
    overflow: hidden;
}
.scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    padding-bottom: 50px;
}
::-webkit-scrollbar{
    display:none;
}

我的假设是，当我将代码从旧版本移到新版本时，我不知何故遗漏了一点关键的CSS，尽管我无法确定遗漏的部分可能是什么。我在这个问题上标记angularJS和webpack并不是因为我认为这两个问题都是问题的真正原因，而是因为一些问题可能是作为我进行此更新的抵押品引入的

这里的核心问题是这个界面中的两个窗格没有垂直滚动的原因是什么（如果有的话？

问题是

#内容，.row，col-sm8

正在自动调整高度以适应内部内容，所以滚动永远不会出现

要解决此问题并获得所需的滚动行为，需要将所有父元素设置为100%。您可以通过将其添加到css中来执行此操作（必要时将其他col类添加到选择器列表中）：

问题在于

#content、.row、col-sm8

自动调整高度以适应内部内容，因此不会出现滚动

要解决此问题并获得所需的滚动行为，需要将所有父元素设置为100%。您可以通过将其添加到css中来执行此操作（必要时将其他col类添加到选择器列表中）：

---

这真的很有帮助…在我的情况下，我不能完全做到这一点，但它告诉我从哪里开始解决问题。我仍然很困惑为什么它在一种情况下有效，而在另一种情况下无效。@Daniel虽然这是问题的解决方案，但它没有解释CSS在（工作）和（中断）之间的变化，在此期间OP没有对CSS进行任何更改。因此，问题确实是父元素缩放以适应该内容，尽管在这个答案中设置CSS规则是不可行的，因为这些规则是如何与引导进行交互的。看起来有效的方法是使用

height:100vh

而不是

100%

，因为这将基于视口而不是父元素设置滚动容器的高度。不过，我可能忽略了这不是一个好主意的原因。如果您使用vh设备，请确保检查与您的项目所需支持的浏览器的兼容性。这真的很有帮助…在我的情况下，我不能完全做到这一点，但它告诉我从哪里开始解决问题。我仍然很困惑为什么它在一种情况下有效，而在另一种情况下无效。@Daniel虽然这是问题的解决方案，但它没有解释CSS在（工作）和（中断）之间的变化，在此期间OP没有对CSS进行任何更改。因此，问题确实是父元素缩放以适应该内容，尽管在这个答案中设置CSS规则是不可行的，因为这些规则是如何与引导进行交互的。看起来有效的方法是使用

height:100vh

而不是

100%

，因为这将基于视口而不是父元素设置滚动容器的高度。不过，我可能遗漏了一个原因，说明这不是一个好主意。如果您使用vh单元，请确保检查与您的项目需要支持的浏览器的兼容性

html,
body,
.row,
.col-sm8,
#content{
  height:100%;
}