Question

给定一个具有特定大小和overflow:auto的绝对定位元素以及也绝对定位的子元素，锚定到父元素的左下角并超出它的大小，如下所示：

#container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    overflow: auto;
}
#content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 200%;
}

为什么父元素上没有垂直滚动条？

当我将子元素的位置更改为顶部而不是底部时，会出现滚动条。看起来滚动条仅在内容溢出父元素的底部边缘时才可见。为什么会这样？

以下是演示此问题的JSFiddle链接：http://jsfiddle.net/qGsd3/14/

Answer 1

我希望得到一个更有趣的答案，但似乎是：＆＃34;因为规范是这么说的。＆＃34;

编辑：我刚才意识到这不是正确的部分......但幸运的是我发现了正确的部分，所以答案就是这样。

http://www.w3.org/TR/2007/WD-css3-box-20070809/#abs-non-replaced-width

在底部有规则，规定何时计算高度以及仅当底部有溢出时它是如何以及它是否会延伸高度。关于这会如何影响溢出还有更多的解读，所以只是四处寻找。

Answer 2

绝对元素不会占用任何空间，这就是原因。您的内容不需要绝对定位，将其更改为静态，我无法理解您要在那里完成的内容......

Answer 3

根据我的经验，将绝对位置嵌入另一个绝对位置给我带来的只是头痛。此外，对于高度，根据浏览器的不同，可以命中或丢失百分比。看看这里，看看我在'坏'类上做了什么来显示溢出。

#container {
position: relative;
width: 100px;
height: 100px;
overflow: auto;
background: green;
text-align: right;
top: 100px;
}
.left {
left: 100px;
}
.right {
left: 300px;
}
#content {
position: absolute;
width: 50%;
height: 100px;
background: red;
}
.good {
top: 0;
left: 0;
}
.bad {
bottom: -20px;
left: 0;
}

http://jsfiddle.net/qGsd3/39/

当顶部边框上的元素溢出时，为什么没有滚动条？

3 个答案: