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/

我有一个codepen up，它从应用程序中隔离了一个示例视图，并关注仅滚动行为：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%;
}

为什么溢出：滚动在此界面中不起作用？

1 个答案: