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

Question

当使用绝对定位并且位置使用 'top' 时，包含的 div 正确地具有垂直滚动条。但是当 location 使用 'bottom' 时没有滚动条。运行片段...

.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>

Answer 1

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

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

我认为欺骗它的方法是有一个带有溢出的包装器，所有内容都位于其他东西中。

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

Absolute positioning from bottom not creating overflow scrollbar

css

css-position