Question

当使用绝对定位并且该位置使用“顶部”时，包含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>

Answer 1

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

因此，您看到的内容很有意义，因为您的内容必须延伸到元素底部之外才能触发滚动。相对于底部使用position: absolute;时，根据定义它不会溢出该方向。

我认为解决这个问题的方法是使用一个包装程序，其中包含溢出内容，并且所有内容都位于其他内容中。

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

1 个答案: