Html 溢出视口

有人能解释一下下面的小提琴是如何溢出视口的吗

.row > .sidebar-fixed{
    position: absolute;
    top: 60px;
    width: 220px;
    height: 100%;
    overflow-y:scroll;
}
.row > .sidebar-fixed.left{
    left:0;
}
.row > .sidebar-fixed.right{
    right:0;
}

.fixed-fixed {
    margin: 0 240px;
}

指定或硬编码某些

顶部值时，为什么
高度不应为100%
而
底部不应为0

  .row > .sidebar-fixed{
        position: absolute;
        top: 60px;
        width: 220px;
        height: 100%; // should replaced by bottom: 0;
        overflow-y:scroll;
    }

高度的百分比值相对于图元的高度

如果绝对定位的元素没有任何定位的祖先（与
static
不同的
位置
），则其包含的块将是，在这种情况下
100%
高度计算为视口的高度

如果定义了
height
属性，而没有
bottom
属性，则
top
属性将仅偏移元素的位置，但不会更改其定义的高度

bottom:0
将元素的边距框的底边与包含块的填充框的底边对齐。（，）

要演示初始包含块、高度和定位行为，请参见。
什么让人如此惊讶<代码>高度：100%

表示如果也指定了父元素高度，则将元素高度设置为父元素高度的100%。然后，将其位置从顶部设置为60px，但它根本不会更改元素高度。所以它的底边比视口低60像素是很自然的

---

对于

bottom:0

，当您指定

top

属性时，元素的上边缘相对于其父元素的上边缘放置在指定的高度，位置为

position:relative | absolute

。指定

bottom

属性时，元素的底边将放置在其父元素的指定高度处，位置为

position:absolute | relative

。同时指定这两个属性将导致拉伸图元。这实际上是指定元素高度的一种非常常见的方法。

“如果也指定了父级高度。”--绝对定位的元素没有这种限制。实际上它们有，但是父级元素对于这些元素来说有点不同。我应该删除高度：100%并替换为底部：0还是保持顶部，身高和身高。@Twi我试试看，伙计。需要设置父级高度的高度%值的原因是无法计算父级的

height:auto

。绝对定位图元不是父图元高度计算的一部分，因此该限制不适用。这是CSS 101。@Shane没有理由保留

高度

，除非您想退回到IE5左右，因为IE5不支持在同一元素上同时定义

顶部

和

底部

属性。很好的示例。。。当我删除高度：100%并将其替换为底部：0。。。我再也看不到右边的滚动条了。由于高度的原因而出现的整个滚动条。