时间戳

首页 > 解决方案 > 从底部绝对定位不创建溢出滚动条

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>

标签： csscss-position

解决方案

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

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

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

推荐阅读