代码之家  ›  专栏  ›  技术社区  ›  atalantus propagated

overflow-y:在Firefox和Edge中滚动不工作

  •  0
  • atalantus propagated  · 技术社区  · 7 年前

    我在一个网站上工作,我有一个巨大的内容,我想滚动。但是,我的代码只在Chrome中工作,在Firefox或Edge中不起作用。

    当我给这个房间定了一个固定的高度时,它似乎起作用了 #content height: 200px; . 但我希望内容总是填满屏幕的其余部分。 收割台的高度可以更改 calc 我想不会成功的。

    我可以使用javascript来计算每次屏幕大小改变时的高度,但是我更喜欢没有js的更优雅的方式。(如果有)

    html, body {
      height: 100%;
    }
    
    body {
      margin: 0px;
    }
    
    #container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow-y: hidden;
    }
    
    #header {
      background-color: blue;
      min-height: 50px;
      height: 50px;
    }
    
    #content-container {
      flex: 1 1 auto;
      display: flex;
      align-items: stretch;
    }
    
    #nav {
      background-color: red;
      width: 150px;
      min-width: 150px;
    }
    
    #content {
      font-size: 15px;
      padding: 25px;
      overflow-y: scroll;
    }
    <div id="container">
      <div id="header"></div>
      <div id="content-container">
        <div id="nav"></div>
        <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut dui id mauris pharetra auctor eu sit amet ante. Nunc sodales
        nisl quis purus lacinia fringilla. Mauris mollis sit amet metus et volutpat. Cras non ante lectus. Vestibulum ullamcorper
        ligula at iaculis pellentesque. Fusce nec fringilla libero, sed maximus eros. Sed aliquam semper augue, ac vulputate
        neque lobortis eget. Cras pulvinar, tortor non auctor lobortis, nulla dui semper augue, ut dictum massa magna vel urna.
        Mauris fringilla iaculis mattis. Mauris at mauris sed mauris fringilla rhoncus. Mauris vestibulum arcu eu lectus pellentesque
        facilisis. Nulla auctor nibh ac neque tincidunt rutrum. Vestibulum dapibus elit ex. Praesent id neque quis felis sodales
        elementum. Quisque condimentum pellentesque finibus. Morbi ut dictum est, vel iaculis lectus. Vivamus sed nunc scelerisque,
        mattis velit id, euismod odio. Suspendisse potenti. Suspendisse eros ante, eleifend ut dictum vitae, posuere sit amet
        turpis. Suspendisse congue vestibulum nulla a tincidunt. Nulla facilisi. Nullam vel leo neque. Suspendisse potenti. Curabitur
        vulputate vestibulum turpis, vitae rhoncus ante gravida sed. Sed vitae efficitur eros, consectetur ullamcorper nisl.
        Nunc turpis massa, dapibus ac elit eget, rutrum tincidunt nisi. Proin nec metus id metus ornare sollicitudin. Integer
        turpis purus, aliquam non est at, ultricies facilisis eros. Integer luctus nisl est, eget laoreet quam commodo ut. Proin
        in enim volutpat, viverra nunc non, elementum est. Integer eu placerat nisl. Nullam posuere maximus metus, ut blandit
        tellus. Vestibulum tristique luctus massa, eget mollis augue lobortis a. Curabitur fermentum id enim ac vestibulum. Praesent
        commodo orci cursus lobortis sodales. Nam pellentesque vulputate enim, eu porttitor libero dignissim in. Fusce ligula
        odio, facilisis sit amet mollis eget, tempor et erat. Quisque sit amet arcu mi. Duis sed tortor ex. Nunc elementum neque
        ex, in luctus sem egestas sed. Etiam quis lorem tincidunt, commodo lacus non, cursus tellus. Maecenas a bibendum ex.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ut ullamcorper felis.</div>
      </div>
    </div>

    Here's also a codepen

    4 回复  |  直到 5 年前
        1
  •  1
  •   Can Zhang    7 年前

    更新方式

    #content-container {
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
        overflow-y: hidden;
    }
    

    Here is the demo

        2
  •  0
  •   thefonz    7 年前

    这是Firefox中的一个已知问题,请参阅Bug 1042151-flex direction:column reverse(或“flex-方向:列;证明-内容:柔性端)溢出-y:auto不可滚动

    https://github.com/philipwalton/flexbugs/issues/108

        3
  •  0
  •   Pradip    7 年前

    更新方式

    #content-container {
      flex: 1 1 auto;
      display: flex;
      align-items: stretch;
      height:100%
    }
    
        4
  •  0
  •   Ravi kant    7 年前

    你能用一下吗 max-height 而不是身高