为什么溢出：滚动不能在这个界面工作？

继比如这个由CSS-技巧（https://css-tricks.com/almanac/properties/o/overflow/）文章建议，我建立引导一个角度驱动的应用双窗格界面。这两个窗格旨在从彼此和页面整体垂直滚动。此行为在此项目的最新版本中按预期工作，此处为：https://monstermancer.herokuapp.com/（可能需要缩短浏览器窗口以查看在未登录的情况下滚动的窗格）。如果相关，该版本的应用程序使用SystemJS和Angular 2.0.0-rc5。为什么溢出：滚动不能在这个界面工作？

近日，之后我做了采用了棱角分明CLI和更新角度的版本变化的WebPack，到2.2，但同时保持所有的HTML和大致相同，即滚动行为不再起作用。看到它在“行动”在这里：https://monster-mash.herokuapp.com/

我有一个codepen了从应用和关注的是仅滚动行为此内隔离的样本视图：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/

来源

2016-12-18 Polisurgist

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

要解决这一点，并获得滚动你想要的行为，你需要让所有的父元素100％。您可以加给你的CSS这样做（添加其他山坳类选择为neccessary名单）：

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

来源

2016-12-18 20:05:23 Daniel

这是真正有用的...我不能做_exactly_，在我的情况，但它告诉我从哪里开始解决问题。我仍然很困惑，为什么它在一个案件中起作用，而不是另一个案件。 – Polisurgist

@Daniel虽然这是一种解决问题的办法，并不能说明https://monstermancer.herokuapp.com/（工作）和https://monster-mash.herokuapp.com/之间改变什么CSS（碎），在此期间OP没有改变他的CSS。 –

所以，问题确实是父元素缩放以适应该内容，尽管设置CSS规则，因为它们在这个答案中是不可行的，因为这些与Bootstrap进行交互的方式。看起来工作的是使用'height：100vh'而不是'100％'，因为它设置了基于视口而不是父元素的滚动容器的高度。不过，我可能会错过这个原因，但这不是一个好主意。 – Polisurgist

为什么溢出：滚动不能在这个界面工作？

回答

相关问题