无法溢出-y：滚动工作答案

【问题标题】：Can't get overflow-y: scroll to work无法溢出-y：滚动工作
【发布时间】：2016-06-09 00:45:49
【问题描述】：

我正在尝试创建一个垂直时间线，但我似乎无法让 overflow-y: scroll 工作。这是网站的链接：

http://fosterinnovationculture.com/infographic/index.html

父 div 有一个 overflow: hidden 但子 div 有溢出-y。如果我删除父 div，它可以正常工作，但我需要在 div 内使用它，以便 list.js 插件正常工作。

【问题讨论】：

标签： html css

【解决方案1】：

我看到你的代码有

html，正文 { 溢出：隐藏； }

// 表示只有全屏，所有溢出都是隐藏的。

所以在 .scroll 中你需要设置最大高度。我建议一个解决方案

.scroll { 最大高度：90vh； }

【讨论】：

太棒了！这解决了它。最大高度与高度有何不同？
max-height 是它可以做的最大值，高度只固定一个值，如果容器增长则不会改变

【解决方案2】：

您将body 的高度固定为100vh，并将其溢出属性的值设置为hidden；所以不管body的孩子的身高是多少，它都不会滚动；

如果将 body 的溢出属性更改为auto，滚动将起作用；

同时您可以将top_nav的position更改为fixed，以使搜索栏始终保持在顶部。

【讨论】：

【解决方案3】：

您似乎在重复同样的问题。这是you asking about 相同的问题（尽管我承认问题是不同的，因为它已经改变了）。这是my answer 这个问题。

在给出答案之前，我要说在编写 CSS 代码时我告诉自己的最重要的事情是：如果我开始不得不 hack，那我就让它变得太复杂了。

话虽如此，首先删除代码中overflow: hidden; 的每个实例。

然后把这个放进去：

.top-nav {
    height: 70px; /* you already specify this on your site */
}
.scroll {
    position: absolute;
    top: 70px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow-y: scroll;
}

在这种情况下，您应该尝试意识到您的问题与常见的设计有关，并且之前一定有人问过您的问题。如果您找不到此类问题的答案，最好重新考虑您的搜索关键字。

a Stack Overflow question 回答了您潜在的“操作方法”设计问题。

【讨论】：