代码之家 › 专栏 › 技术社区 › user358041

从底部绝对定位,不创建溢出滚动条[重复]

css-position css

0

user358041 · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

1

Bryce Howitson 7 年前

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

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