为什么overflow:scroll 在这个界面不起作用？

Question

根据 CSS-Tricks (https://css-tricks.com/almanac/properties/o/overflow/) 对这篇文章的建议，我使用 Bootstrap 为 Angular 驱动的应用程序构建了一个两窗格的 UI。这两个窗格旨在相互独立地垂直滚动，并且与整个页面无关。此行为在项目的最新版本中按预期工作，此处为：https://monstermancer.herokuapp.com/（可能需要缩短浏览器窗口才能在不登录的情况下查看窗格滚动）。如果相关，此版本的应用程序使用 SystemJS 和 Angular 2.0.0-rc5。

最近，在我对 Webpack 进行更改后，使用 Angular CLI 并将 Angular 版本更新为 2.2，但在保持所有 HTML 和 LESS 相同的同时，滚动行为不再起作用。在此处的“操作”中查看它：https://monster-mash.herokuapp.com/

我有一个代码笔，它将示例视图与应用程序内部隔离开来，并且仅关注此处的滚动行为：https://codepen.io/Polisurgist/pen/bBOZzm

该笔的相关 CSS：

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

我的假设是，当我将代码从旧版本移动到新版本时，不知何故我错过了一些关键的 CSS，尽管我无法放置丢失的部分可能是什么。我在这个问题上标记 angularJS 和 webpack 并不是因为我认为其中任何一个确实引起了问题，而是因为某些问题可能已经被引入作为我进行此更新的抵押品。

这里的核心问题是如果有的话，这个界面中的两个窗格没有垂直滚动的原因是什么？ https://monster-mash.herokuapp.com/

Answer 1

问题是#content, .row, col-sm8 正在自动调整高度以适应内部内容，因此滚动永远不会出现。

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

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