css - 从底部绝对定位不创建溢出滚动条

<分区>

当使用绝对定位并且位置使用“顶部”时，包含的 div 正确地具有垂直滚动条。但是当位置使用“底部”时，没有滚动条。运行代码片段...

.container {
  height:60px;
  width: 100px;
  border:solid;
  overflow:auto;
  position:relative;
}

Working - has a vertical scrollbar...
        <div class="container">
          <div style="position:absolute; top:0px">Item 1</div>
          <div style="position:absolute; top:20px">Item 2</div>
          <div style="position:absolute; top:40px">Item 3</div>
          <div style="position:absolute; top:60px">Item 4</div>
          <div style="position:absolute; top:80px">Item 5</div>
          <div style="position:absolute; top:100px">Item 6</div>
        </div>

<br/>

Not Working - no vertical scrollbar...
        <div class="container">
          <div style="position:absolute; bottom:0px">Item 1</div>
          <div style="position:absolute; bottom:20px">Item 2</div>
          <div style="position:absolute; bottom:40px">Item 3</div>
          <div style="position:absolute; bottom:60px">Item 4</div>
          <div style="position:absolute; bottom:80px">Item 5</div>
          <div style="position:absolute; bottom:100px">Item 6</div>
        </div>

最佳答案

我找不到任何证明这一点的文档，但据我所知，溢出是从通常是元素左上角的原点开始计算的。负溢出不会触发滚动。

所以您所看到的是有道理的，因为您的内容必须延伸到元素的底部才能触发滚动。当您使用相对于底部的 position: absolute; 时，根据定义它不能溢出该方向。

我认为欺骗它的方法是使用一个带有溢出的包装器，并将所有内容放置在其他东西中。

关于css - 从底部绝对定位不创建溢出滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53859859/