【问题标题】: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_navposition更改为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 回答了您潜在的“操作方法”设计问题。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-08-04
        • 1970-01-01
        • 1970-01-01
        • 2017-03-02
        • 2011-07-09
        • 1970-01-01
        • 2012-10-25
        • 2017-05-30
        相关资源
        最近更新 更多